 Terima kasih kerana melihat semua orang. Ini adalah kali pertama saya beri bercakap. Saya tidak benar-benar tua untuk pembangunan. Jadi jika saya mulakan kadang-kadang, saya minta maaf tentang itu. Jadi jika anda mahu jumpa saya nanti, saya selalu melakukan Facebook saja. Sebelumnya, saya sedang mencari personal portfolio saya sendiri. Saya seorang penerbangan animasi. Saya suka websites yang selalu bergerak. Mereka sebenarnya bergerak. Mereka sebenarnya membuat anda rasa baik untuk melihatnya. Ada beberapa websites yang mempunyai banyak keputusan. Tetapi tetapi anda masih ada keputusan. Dan kadang-kadang, botolnya sangat kecil. Dan banyak perkara lain. Saya bermula melakukan kembali. Tetapi setelah saya bermula meletakkan. Kemudian saya menjadi sangat berminat dalam semua perkara ini. Jadi mungkin saya hanya akan mencari 3 minit untuk berkongsi. Apa yang saya rasa menginsipkan saya untuk berfikir begini. Jadi saya masih 22 tahun lalu. Saya hanya 22 tahun lalu sebenarnya. Sebelumnya, saya ingin berkata... Sebelum ke sekolah sekolah yang tinggi. Saya tidak mempunyai peluang untuk mencari. Tetapi saya mempunyai peluang untuk menggunakan Powerpoint. Saya telah menggunakan Powerpoint untuk melakukan ini dan itu. Kemudian, ketika saya mencari animasi Powerpoint, saya merasa sangat menarik. Selepas sekejap, saya mencari untuk membuat permainan dengan mereka. Saya hanya mencari sekejap untuk mencari. Jadi ia nampak seperti itu. Mereka mempunyai transisi yang sederhana. Anda hanya mencari dan mencari. Jadi mencari area yang panjang untuk bermula dan tinggal di sana. Jadi jika anda mempunyai area yang panjang, anda mencari. Jadi saya membuat sesuatu... Saya tidak tahu apabila anda muda, anda hanya membuat sesuatu seperti itu. Kita patut kembali ke CSS. Jadi... Ini adalah pilihan rahsia untuk seseorang yang berjalan dengan kita segera. Tak mengapa. Okey, mana kita akan... Okey, jadi saya cuba... Saya cuba fikir bagaimana kita... Kami sekarang seperti di deskripsi kata-kata. Pada masa yang terakhir, kami tidak mempunyai... Kami tidak mempunyai perkara seperti... Kami mempunyai perkara seperti Java, FlashPlayer... Dan banyak perkara lain yang... Website hanya akan mencari dan mencari. Dan kemudian, wow, ia semua berinteraktif dan sebagainya. Sekarang, jika seseorang ingin mencari Flash, Google Chrome akan berkata... Tidak, orang ini ingin mencari Flash. Bagaimana anda menolakannya? Kemudian, pakaian akan berlaku sedikit. Kemudian, mereka akan berkata, tidak. Jadi Flash adalah dari jalan-jalan. Kemudian, Java berlaku. Saya tidak tahu. Ada sesiapa yang mencari lagi? Saya tidak melihat sesiapa lagi. Jadi, kami tinggalkan dengan... Sekarang, semua kata-kata sekarang... HTML5, CSS3. Saya fikir... Sekarang, kami berada di staf ini... Bagaimana kami masih membuat animasi berlaku? Jadi... Saya bercakap dengan beberapa kawan saya dan mereka... Saya melihat bahawa... Apabila orang belajar HTML dan CSS... Mereka belajar HTML dan CSS. Kemudian... Kerana... Mereka mempunyai deskripsi... Oh, Reakt.js. View.js. PHP. Jadi, mereka berlaku belajar itu. Maksud saya, tiada apa-apa yang salah dengan itu. Tapi... Saya rasa saya mahu... Saya sedih sedikit... Bahwa web tidak begitu... Menarik dan hidup lagi. Jadi... Jadi... Saya bermaksud... Saya sangat gembira bahawa... Ada banyak orang di sini. Tetapi... Ia adalah tempat yang baik... Untuk menunjukkan... Saya tidak tahu... Beri semua orang sedikit... Untuk menunjukkan... Jadi, ia akan lebih mudah untuk semua orang... Untuk memulangkan hal ini. Jadi... Okey. Jadi... Saya rasa... Saya rasa... Yang paling mudah untuk membuat sesuatu... Animasi... Animasi dalam perjalanan yang... Apabila... Apabila... Ia tidak bergerak oleh satu frame... Tetapi, ia bergerak dari satu frame... Untuk lain. Itu jika anda perlukan... Maksud animasi. Seperti... Saya rasa... Yang paling mudah... Ia hanya... Ia hanya... Jadi, kita lihat kemudian unpan aquest... Apabila betul-betul... Missa sedikit yang tinggi dengan ini. Dan kita berikan.....vable urusan wäre semula yang shooters... 1 perkara, 2 perkara, 3 perkara, 4 perkara dalamgenes... sea gender waves, B openности pers monument. Bersрузinya. Dan... Kita berikan surat kemajuan dimana. Jadi... Saya rasa ini... Yang paling mudah untuk membuat... Animasi... Ya... Okey. Ini perkara yang paling mudah... Kemudian... Mungkin... Dan kemudian ia seperti, hanya dengan menambah 1, 2, 3, 4, ini bukan sebenarnya 2. Mereka sangat teruk. Jadi, 5 jenis jika anda tidak berhubungan jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis. Yang Sengs �aku ia seperti akan membuat hal yang sedikit beating, dan mungkin anda akan beri hidangan kata� volunteers, yang berguna seperti surfaces dan jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis. Jodoh jenis jenis, dan jodoh jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenis jenisyur servircanhamijakan kerun Dunia pakeвод Must符 dan mempunyai sesuatu, jadi saya akan hanya klik pada Blok In Conspicuous Text, dan kemudian kita dapat yang lain oops, okey, ada ini, okey, jadi apa yang terjadi apabila saya klik pada Blok In Conspicuous Text minta maaf, semua, akan ke Javascript sekarang tetapi kemudian banyak orang di sini ke Javascript jadi apabila saya klik ini, saya hanya menyebabkan sebuah kelas, seperti ini sebuah talk CSS, jadi saya hanya melakukannya saya hanya melakukannya kepada CSS yang saya tahu jadi ia hanya menyebabkan sebuah kelas, seperti tidak terlalu susah, betul-betul jika anda belum melakukannya Javascript, tidak terlalu susah tetapi semua animasi di sini datang dari kelas ini ia seperti hanya sebuah kelas dan anda hanya dapat menyebabkan segala-galanya saya hanya beritahu bahawa animasi tidak terlalu susah anda hanya dapat menyebabkan sebuah kelas CSS dan hanya menyebabkan dan dua kelas Javascript ia tidak terlalu susah, betul-betul, okey, jadi mana ia? okey, jadi apabila saya mempunyai kelas ini, saya dengan kelas ini, ia seperti anda hanya menyebabkan dan membuat kelas ini, okey jadi, pertama, jika saya membuat kelas ini di sini dan selepas kelas 3 saya membuat kelas ini di sini jadi apa yang terjadi ia adalah perkara kifrain ini jadi per Juan, itu terjadi seperti pada masa pada masa setelah menyebabkan kelas ini, browser sebagainya menyebabkan kelas CSS. Ia sedikit penting kerana apabila anda membuat animasi, anda mahu pastikan anda mahu pastikan setiap frame betul. Jadi saya akan mencuba dan menunjukkan sesuatu dengan sesuatu yang akan berlaku. Adakah anda melihat kelas di sana? Ya, itu apa yang berlaku apabila anda tidak benar-benar mempertimbangkan sebuah frame. Saya bermakna di sebagainya, ia sangat mudah. Seperti, anda hanya mahu, bahkan apabila lelaki menyebabkan dan sebagainya dan kelihatan sangat baik. Tetapi, ada beberapa kelas yang anda perlu anda perlu mempunyai satu kelas yang lain. Jadi, apa yang saya beritahu adalah, ada beberapa kelas biasanya. Pertama, kita mempunyai kelas default dari element. Kemudian, apabila anda mempunyai kelas animasi, ia mempunyai. Kemudian, sesuatu yang lain mempunyai kelas animasi adalah perkara yang menarik adalah, untuk kelas ini, saya beritahu ia untuk keluar. Jadi, posisi perkara itu adalah mempunyai kelas key. Sekarang, ia tidak di sini kerana kelas key. Tetapi, apabila saya mempunyai apa yang berlaku, saya mempunyai kelas exit dari kelas ini. Apabila saya mempunyai kelas exit dari kelas 3. Jadi, kelas ini, kelas ini, kelas ini terlalu kelihatan. Dan, kelas ini mengambil kelas ini lagi. Jadi, untuk sebulan sebulan, ia tidak terlalu kelihatan. Sebab itulah ia masih terlalu kelihatan. Tetapi, jika kelas ini terlalu kelihatan, ia berlaku. Jadi, saya rasa kelas yang besar untuk mengambil kelas ini adalah, basically, untuk kelas ini, jika saya mahu mempunyai sesuatu seperti ini. Pertama, kelas ini ada untuk kita lihat. Pertama, kita ada tidak, ini. Okey. Pertama, di sini saya beritahu Okey, jika anda beritahu saya tidak... Tunggu, mana ini? Okey, saya melakukan banyak ini pada pagi. Jadi, saya tidak lupa di mana mereka. Tetapi, jika anda melihat kelas ini, anda akan melihatnya. Okey, mari saya menjelaskan. Ia adalah sebaiknya. Tetapi, basically, perkara-perkara yang anda tidak mahu untuk... perkara-perkara yang anda tidak mahu untuk memasak di sini, jangan memasak di dalam kelas ini. Jadi, untuk... seperti di sini, kelas ini tidak... tidak dapat menyebabkan... Oh... kelas ini tidak dapat menyebabkan, oh, saya mahu kelas ini untuk menjadi di sini. Ia perlu mengatakan sesuatu seperti atau... kelas 0, atau sesuatu yang akan memasaknya. Seperti perkara-perkara yang membuatnya memasak dari kelas ini yang saya ada. Jangan memasak di dalam kelas itu. perkara-perkara yang membuatnya memasak memasak di sini atau di sini. Sebaiknya di sini. Dan kemudian... Jadi, saya menyebabkan kelas ini dan... ada kedua perkara-perkara. Saya tidak pasti... jika semua orang tahu tentang perkara-perkara ini disebabkan animasi film. Kerana... menyebabkan... setelah... setelah... kelas ini memasak... apa perkara-perkara ini... setelah kelas ini memasak... apa perkara-perkara ini memasak. Jadi, ini... saya tidak pasti... jika semua orang tahu perkara ini. Ia boleh memasak dari sini. Ia boleh memasak dari sini. Dan ia boleh memasak dari sini. Jadi... jika anda tidak membuat apa-apa, ia akan memasak dari sini. Ia adalah masalah kerana... jika anda mahu... memasak, jika saya mahu animasi saya... memasak dari ini dan memasak dari ini, setelah perkara ini memasak... setelah perkara ini memasak, saya mahu ia memasak. Ya, memasak. Jangan... tidak memasak dari mana-mana. Jika... untuk itu berlaku, anda perlu... memasak animasi... untuk... Okay, jadi animasi... untuk memasak ini di sini. Ia mempunyai 3 perkara yang mungkin... ke depan... 3 perkara yang mungkin saya ingat. Mungkin lebih banyak. Mungkin... masa untuk memasak lagi. Semoga ada apa-apa yang anda katakan. Baiklah. Ya, jadi ada beberapa perkara ini. Tidak bermakna... sebelum animasi... berlaku... seperti... sebelum kita memasak kelas animasi, ia akan memasak ini. Apabila kita memasak kelas animasi, ia memasak ini. Apabila kita memasak kelas animasi, apabila animasi memasak, ia memasak ini. Tapi jika anda mahu memasak ini, anda mahu... anda mahu perkara-perkara untuk memasak atau memasak. Jangan bergerak selepas kelas animasi anda. Kemudian... anda dapat membuatnya... berlaku... yang bermakna... selepas ia memasak... memasak kelas animasi. Kemudian... sebelum ia memasak... memasak kelas animasi. Kemudian... berlaku... berlaku. Jadi, ia adalah satu perkara yang penting. Okey, kemudian... Sekarang... untuk kemudian... keadaan terakhir... ia sedikit... ia sedikit susah... untuk orang-orang... mula memasak ini... kerana... bagaimana anda... saya rasa... banyak tempat yang saya... saya memasak... mereka tidak memasak... pure HTML dan javascript lagi. Jadi... Ya... mereka seperti... kami mahu anda tahu ReactJS. Anda tahu ReactJS? Ya, bagus. Okey. Jadi... Jadi... Jadi... ReactJS ada... sangat... Saya tidak tahu jika anda telah beritahu apa yang telah saya telah beritahu. Ia mempunyai sistem jauh kawasan kelas. Seperti... ketika anda memasak kelas, ia memasak. Seperti... bagaimana saya memasak kelas? Ya. Jadi... saya memasak... memasak kelas ini. Jadi... ReactJS ada... yang lain... disebut... ReactJS ada... mereka mempunyai... saya tidak tahu apa yang mempunyai ini... ia mempunyai MPM... ia mempunyai ReactJS. Jadi... kita mempunyai ReactJS. Jadi... ia mempunyai TransitionReactJS. Jadi... mereka mempunyai... CSS animasi... dan... basically they handle all the ReactJS staff for you. I mean ReactJS is a little hard... to add in some types of animations... but they make it simple. So... and but... but... for some... the syntax might be a little scary. So... I'm... I'm just going to give a little rundown on it. Oh ya by the way... those who do front-end puzzle rocks. I mean just an alternative to webpack. Ya. I mean... like you can just type import this from that... and they will... they will immediately yarn install it for you. You don't need to do anything. It's like magic. Okay anyway... I have a ReactHTML... and then I have... and then it... it references this... and then in this... I have these two styles. So let's see how it actually looks like. Oh no... where's this? Okay. Uhh... This is a to-do list, not properly designed. I was rushing. Sorry. Okay. So... like you just add something. No, you don't... you... to-do item doesn't start with high. Oh no. Buy milk. Buy milk. Ya. So I'll click the add button and it comes in. Buy milk lah. Ah buy milk lah. Anyhow ni buy milk. Okay. So... Yes. Is this animations in React? Yes. Is it just some loading state? No, it's not just a loading state. So we can actually quite easily do animations and transitions in React. You just need to figure out the syntax. So... where is this? Okay. So... for the guys, for the people who like never touch React before and are totally mind-blown by this, I'm sorry. But we'll get to the CSS in like one minute. So... You just add a transition group or if you're just one item and not a list, then you don't need a transition group. And then you just need to do this and then you pass in the class name. So this class name is a common... it seems to be a common thing. So... Based on this class name, you can... you can animate all the states of the animation. All the different segments of the animation. This is how they... I guess it's how they made it for us and it's not bad so far. I mean, I haven't tried it a lot but it's not bad. So... So here it is. So remember, this slide in right. So... So they provide a few helper classes. If this violates your... your CSS framework, I'm sorry, they just wanted it this way. So... I guess you can... you can use component, dash, dash, something and then... and then just add the slide in right at the end. So... So this is the default class. This one would be... the default class that gets applied to the element. The animation classes, there are a few for this. So... this isn't the exact way that is put in the example but I'm just making use of it. So there's many ways to do this. So... but anyway, how they do it is... first, when... when you... when the item comes in, when the item is like... is like... being added to the HTML, like whenever... like jQuery show or whatsoever or you want to... the moment you want to show this element, if they will add this class, they will first add this class then for like one take. I don't know how fast is one take but it's just one take, like one frame. Maybe you don't even get to see it. Never mind. Then they will add this interactive class. So... some... some examples are... some ways people make use of this is they will maybe do oh, opacity 1. No, opacity 0.01. Then here, they will force a transition all... no, that's not... that's not right until encode opacity. Ah... Maybe transit in like 0.3 seconds is out. Um, this one there's a list of them. It's quite easy to understand. Is in means like at the starting it eases and then it goes normal. Is out is like it goes normal and then it eases out. Then is in out is like in and out. Then there's another one which is like linear so whichever fits you. So this is the duration. This is the property I will transit. Ah... Yes. So... So... some people will do this instead. And then they will oh, okay. I will set the opacity to 1. So they will force the transition to happen like immediately. So the good thing about react is react will be like oh, this guy has changed the state. So he has to rend... we have to render this now. Okay. Put in opacity 0.01. Why is it not 0.00? I don't know. We'll just put in what this and then they will throw in this which will activate the transition and then make it transition to opacity 1. So that's how they do it. And there's so many other ways you can do it because like I didn't do this because I like key frames. I like to be more declarative about it and I want to do like more interesting stuff. So I use key frames. So you can use key frames. You can use transition. You can... I don't know. With this, you can like just make the thing bounce in or something like every possible thing. Then if you want to make the active and the enter and the exit different like you want to make it bounce in and then you want to make you want to make it zoom out for whatever reason then the different ones are there for you also. So this is React and then there's View.js I've just started View a few weeks ago and I think it's awesome. I'm not going to comment on the war between React and View. It's a little scary of a war. People even make websites to put them next to each other and compare how many stars they have and then whenever because the person who created it was a View supporter so whenever View had more stars they will have fireworks or something. But I think he taken it down. It was hosted on Heroku so maybe they don't like View. I don't know. So the View one... Okay, so same thing. I can do transitions. I'm sorry. I did this in 30 minutes so I didn't have time to fix the... This is going to be so ugly. Is it still recording? Ya, too bad. Ya, I see it so ugly. Oh my God. Okay, but anyway it does transit. So it will definitely be possible to make the thing unmount before the next thing mount so this won't be a problem. Just saying. Okay, so all this stuff how... the key thing is like how do we do it? Where are we? Okay, so this is at View. This is the index. I'm a bit new to View so I haven't really and I didn't have time to use all the component file so everything is over here. So with View, we use this thing called Transition Component. The guy who makes View I kind of like him because he's a design. I think he's a designer. Anyway, View looks very nice and their website is nice. It looks very modern. It looks very stylish. So Ya, and okay. The key thing is that they have a built-in Transition Component which is like oh my God, why doesn't... why is the React one not built-in? I don't know. So with the Transition Component you just use the thing. You just use the name and you use things like vif to show where to determine whether this you want to show the thing or not. So vif are just like these are just like javascript variables. So you just set it to true or false and what happened when I click the correct answer was that I said the I just said show this one to false and show the next one to true so that they will show the next one. So but the next but the question is how do we animate them? Well, it's true this same thing quite similar. You just give they have a namespace and then where is it? So many files. Nice. Not a lot actually. Okay. So same thing they have. Okay. View has a bit more classes and they've been so nice to give us diagram. It's like it's like wow. Where is it? Ah, here it is. Okay. So I don't know why okay. I guess opacity is the easiest one to to describe animation with but it's starting to feel like it's overrated. Okay. So first they will apply venter like the moment you say oh I change the state now this thing this guy has to render apply venter then they will apply and they will apply venter active and then they will try to remove venter and put venter too. Okay. I haven't actually tried this so don't take my word for it but ya. These are generally what it's starting at and going to starting at and going to. So it's quite simple to like just set your properties there and let view take over the job. So ya. This is how you do it with view. So at first I was I was ambitious I wanted to do angular I wanted to put two g-set into this also it's like all those javascript animation stuff and then try to compare them but I have no time so maybe I'll do that next time ya but I hope after this everyone like will try to do a bit more maybe at least at one transition CSS component into their projects and see how it goes ya make it make it a bit more lively right maybe 5 more lines ya. So I hope this helped everyone Thank you.