Coding

ReactJS & CSS Animations Basics – #3 Transitions with ReactCSSTransitionGroup

  • 00:00:01 you know it animations are important
  • 00:00:04 they support your user using your
  • 00:00:06 website he now knows what he just did
  • 00:00:09 and where he is so there are more than
  • 00:00:10 just a little extra now react chase
  • 00:00:13 gives us a powerful tool to add
  • 00:00:15 animations to your react.js application
  • 00:00:18 we already did this in the last videos
  • 00:00:20 with pure CSS animations and transitions
  • 00:00:22 but now we're going to use this tool to
  • 00:00:25 animate more complex things like this
  • 00:00:28 one we're going to build here again
  • 00:00:30 using the material CSS framework here I
  • 00:00:33 get a Spacek list now watch what happens
  • 00:00:36 if I add items they slowly fade in and
  • 00:00:39 the same is true if I click such item so
  • 00:00:42 here we're animating the list and that's
  • 00:00:44 a bit more complicated than what we did
  • 00:00:46 before but with this extra tool I'm
  • 00:00:49 showing you it's super easy also notice
  • 00:00:52 that if I load the page for the first
  • 00:00:53 time you also see them fade and slowly
  • 00:00:56 so we get this initial loading here so
  • 00:00:59 here I'm in my react.js project pretty
  • 00:01:01 similar to the one you saw before though
  • 00:01:04 now I got this button here which allows
  • 00:01:06 me to add new items and I got this
  • 00:01:09 collection here this list which allows
  • 00:01:11 me to output items using the map
  • 00:01:13 function here to map my items and then
  • 00:01:16 return a list item for each individual
  • 00:01:18 item notice that I give each item a key
  • 00:01:21 here which is very important when using
  • 00:01:24 this tool I'll soon show you it allows
  • 00:01:26 react.js to keep track of your
  • 00:01:28 individual items the key I use here
  • 00:01:31 simply is the item itself since my items
  • 00:01:34 here are simply some strings which I can
  • 00:01:36 use as keys and which are unique which
  • 00:01:39 the key certainly should be so this is
  • 00:01:41 the other part of the application I
  • 00:01:43 initialize my state with an array of
  • 00:01:45 items just free items by default and the
  • 00:01:48 number of items on the stack right now
  • 00:01:50 in the on add item method here I simply
  • 00:01:54 replace my array with a new array which
  • 00:01:57 are increased by one item with the
  • 00:01:59 concat method concat here simply gives
  • 00:02:02 me a new array so that I don't update
  • 00:02:04 the old one but simply set it to a new
  • 00:02:07 one so that this state gets updated
  • 00:02:08 correctly so I'm adding this new item
  • 00:02:11 and I'm increasing the item number by
  • 00:02:13 one in D on the
  • 00:02:15 item method here I simply take the old
  • 00:02:18 items array with these slice methods you
  • 00:02:20 get back a new array then on this new
  • 00:02:23 array eye splice off the element I want
  • 00:02:26 to remove since I get the ID passed to
  • 00:02:29 this method and then I set my items
  • 00:02:32 array to this new array which is the old
  • 00:02:34 array minus one item and this items
  • 00:02:38 array is then again rendered down here
  • 00:02:41 in my render method notice that when I
  • 00:02:44 click on such a item the on delete item
  • 00:02:46 effort is fired and there I pass not
  • 00:02:49 only this to bind this correctly but
  • 00:02:52 also I which is simply the index of the
  • 00:02:55 current item passed here in the map
  • 00:02:57 callback so that's all normal JavaScript
  • 00:02:59 es6 react code until now simply
  • 00:03:03 rendering a list and if we have a look
  • 00:03:04 at this
  • 00:03:05 reloaded click add item you now see this
  • 00:03:09 works but we got no animations which is
  • 00:03:12 a bit boring so let's add some
  • 00:03:14 transitions namely the opacity
  • 00:03:16 transitions you saw before to do so
  • 00:03:19 react chairs offers us a nice extra tool
  • 00:03:22 or package we can use we have to install
  • 00:03:25 that package with npm install – – saved
  • 00:03:28 you also save it in the package.json
  • 00:03:30 file and then it has two convenient a
  • 00:03:33 very short name react add-ons CSS
  • 00:03:37 transition group like this now if we
  • 00:03:41 enter this will be pulled down and add
  • 00:03:43 it to my project and thereafter of
  • 00:03:45 course I can use it I do use it here in
  • 00:03:48 my file by simply importing it and it
  • 00:03:51 only has one default export so I can
  • 00:03:53 choose any name I want here I'll name it
  • 00:03:56 react CSS transition group which is all
  • 00:04:00 the main name you'll find in a lot of
  • 00:04:01 tutorials and this of course has to be
  • 00:04:04 imported from the reactant add on CSS
  • 00:04:07 transition group package now this thing
  • 00:04:11 here actually can be used like an
  • 00:04:13 element in our HTML code here and we
  • 00:04:17 should wrap the items we want to animate
  • 00:04:20 with it so this is a wrapper which
  • 00:04:22 allows us to put any items we want to
  • 00:04:25 animate between the opening and closing
  • 00:04:27 tag and then we can con
  • 00:04:29 figure this rapper his new tool your
  • 00:04:32 this new object we just imported to
  • 00:04:35 configure which animations should be
  • 00:04:37 applied to the object between the
  • 00:04:39 opening and closing tag so I will add it
  • 00:04:43 here in my list and specifically here in
  • 00:04:46 the unordered list before executing this
  • 00:04:50 function here so here I will simply use
  • 00:04:53 react CSS transition group and also
  • 00:05:00 close it there after and now we need to
  • 00:05:03 configure this react CSS transition
  • 00:05:05 group otherwise it won't do anything
  • 00:05:07 very importantly we need to give it a
  • 00:05:11 transition name which is which animation
  • 00:05:14 should you execute whenever something
  • 00:05:17 happens to your objects nested inside of
  • 00:05:20 you so to this list item object in this
  • 00:05:23 case how it works behind the scenes is
  • 00:05:27 something I will show you in a second
  • 00:05:28 but you get the basic read now it will
  • 00:05:31 attach some CSS classes to the elements
  • 00:05:34 that's the between the opening and
  • 00:05:36 closing tag and with these elements we
  • 00:05:39 or with these classes we can then
  • 00:05:40 control which animation should be shown
  • 00:05:43 so here we choose a name and this name
  • 00:05:46 later on has to be reflected in the
  • 00:05:48 easiest as class as we set up but I'll
  • 00:05:50 come back to this so now here let's give
  • 00:05:53 it a give it a name of fade for example
  • 00:05:56 since I want you fete them in or out
  • 00:05:58 depending on whether I add a new item or
  • 00:06:01 remove the item I also need to set the
  • 00:06:05 time the animation takes when element
  • 00:06:08 enters and thereafter when it leaves so
  • 00:06:11 ultra as a lab transition enter and here
  • 00:06:15 our satis – 300 milliseconds so this
  • 00:06:17 value is in milliseconds here and the
  • 00:06:19 leaves should also be 300 milliseconds
  • 00:06:22 important to note here I said when an
  • 00:06:25 element enters or leaves so this
  • 00:06:28 animation or this object here the react
  • 00:06:31 CSS transition group it's meant to be
  • 00:06:33 used on transition status why it has
  • 00:06:36 this name so when you have elements like
  • 00:06:39 here in a list which can be added or
  • 00:06:41 moved if you just want to do what we did
  • 00:06:44 in the last videos simply flip back
  • 00:06:47 heart or anything like that but the
  • 00:06:49 content doesn't change so you're not
  • 00:06:50 flipping the card to replace it with a
  • 00:06:52 new one but simply to flip it well then
  • 00:06:56 a normal CSS animation like you saw it
  • 00:06:58 in the last videos is all you need the
  • 00:07:01 react CSS transition group really shines
  • 00:07:03 or is there to be used when you want to
  • 00:07:06 animate the addition of an element or
  • 00:07:10 the swap of element not just the flip of
  • 00:07:14 element where the content doesn't change
  • 00:07:16 I'm just highlighting this because it's
  • 00:07:18 important to understand when to use this
  • 00:07:20 and when to use normal CSS built-in
  • 00:07:23 animations and don't use that at all
  • 00:07:25 because you wouldn't need it in the
  • 00:07:27 cases I showed you in the last videos
  • 00:07:28 otherwise they wouldn't have worked like
  • 00:07:30 this right so we set up this transition
  • 00:07:36 group and gave it a name of fate now
  • 00:07:39 what does this do what it actually does
  • 00:07:41 is it now will attach a couple of CSS
  • 00:07:45 classes cue each list item element here
  • 00:07:48 when we add it or delete it only then it
  • 00:07:51 will not do this when this list item
  • 00:07:54 element is there only during the
  • 00:07:56 addition and deletion process and this
  • 00:07:59 is what we had to specify how long each
  • 00:08:01 process will take enter and leave
  • 00:08:03 otherwise react or this object here
  • 00:08:06 won't know for how long it needs to
  • 00:08:09 attach these classes so that is really
  • 00:08:11 important under stead it only attaches
  • 00:08:14 them for a short period of the time most
  • 00:08:16 of the time no class will be attached by
  • 00:08:19 this react CSS transition group this of
  • 00:08:22 course leaves the question which classes
  • 00:08:24 are attached I'll explain this while
  • 00:08:27 setting them up so let's go to the
  • 00:08:28 index.html to create some classes which
  • 00:08:31 this react CSS transition group will use
  • 00:08:33 remember we named it or we named our
  • 00:08:36 transition fade so it will expect a
  • 00:08:39 couple of classes which include fade in
  • 00:08:42 their name but not just fade actually it
  • 00:08:45 uses four classes fade enter fade enter
  • 00:08:50 active fade leave and fade leave active
  • 00:08:53 now what are the diff
  • 00:08:56 well I'll explain this let's first
  • 00:08:57 create him so we needed fate enter we
  • 00:09:01 will also need fate enter active we will
  • 00:09:08 also need faith leave and we will also
  • 00:09:12 need faith leave active like this fate
  • 00:09:19 enter here is only attached for a very
  • 00:09:22 short fraction of the time when the
  • 00:09:25 element is created so literally just a
  • 00:09:28 millisecond or something like this we
  • 00:09:30 use fate enter to set the initial state
  • 00:09:33 from which we want to animate so if we
  • 00:09:36 want to fade in element we would set the
  • 00:09:39 opacity to zero in fade enter because we
  • 00:09:42 want to start at zero and set it to 1
  • 00:09:44 over time fade enter active will be the
  • 00:09:48 style which is attached to this element
  • 00:09:51 as long as the fade-in animation or any
  • 00:09:55 animation whatever you choose runs so
  • 00:09:57 these 300 milliseconds here you wanna
  • 00:10:01 set the final state and also if we use
  • 00:10:05 CSS transitions de transition attribute
  • 00:10:08 to make sure it gets animated and not
  • 00:10:10 pops to final state instantly and fade
  • 00:10:14 leaf does the opposite way leaf is
  • 00:10:16 attached at the beginning to give you
  • 00:10:19 the starting state and fatal if active
  • 00:10:22 is attached thereafter to set the end
  • 00:10:25 state and the transition attribute to
  • 00:10:29 make sure it not pops instantly but
  • 00:10:31 instead smoothly transitions over so
  • 00:10:35 fade enter should have since we want to
  • 00:10:37 fade it ALP acity of 0 and fade entry
  • 00:10:41 active should have opacity of 1 also
  • 00:10:45 here I need to attach the transition
  • 00:10:47 attribute transition everything or we
  • 00:10:50 could also choose transition the opacity
  • 00:10:51 since you do that then this time here
  • 00:10:54 300 milliseconds of course should match
  • 00:10:57 the time we set up here transition enter
  • 00:10:59 so that we have the same time stay time
  • 00:11:03 this react CSS transition group object
  • 00:11:06 knows and the time we actually use here
  • 00:11:09 then let's ease it out but of course
  • 00:11:11 this is up to you now for faith leaf I
  • 00:11:15 want to start a top acity of one because
  • 00:11:18 it's already there we want now to fade
  • 00:11:21 it out so the target opacity is zero and
  • 00:11:25 the transition will be attached again
  • 00:11:28 because I want to transition the opacity
  • 00:11:31 over 300 milliseconds and Easter's out –
  • 00:11:34 of course the 300 milliseconds here also
  • 00:11:37 have to match to you 300 milliseconds
  • 00:11:39 here another important side note why do
  • 00:11:43 I need to add transition here again I
  • 00:11:45 already did added here when we fade it
  • 00:11:48 is element in well because these classes
  • 00:11:52 won't stay there they will be removed
  • 00:11:54 once the animation finished so then this
  • 00:11:56 transition class or style year will no
  • 00:11:59 longer be applied instead it will be
  • 00:12:02 gone so we have to reapply it when
  • 00:12:04 fading it out and there should be
  • 00:12:07 transition and your time out and leave
  • 00:12:09 time out as a side note sorry about that
  • 00:12:11 so make sure this is time out otherwise
  • 00:12:14 this will not work so if we now reload
  • 00:12:16 the application and add item we see it
  • 00:12:19 fade in and if we click on it it fades
  • 00:12:21 out so now this is working but if we
  • 00:12:25 have a look at it in the console more
  • 00:12:27 specifically the elements tab let's
  • 00:12:29 inspect such element and specifically
  • 00:12:33 watch for new elements which get added
  • 00:12:35 did you see that the classes kind of
  • 00:12:38 jumped around so we had new classes and
  • 00:12:41 then they were gone if you watch closely
  • 00:12:43 and I will show you this by simply
  • 00:12:46 increasing the time this takes so let's
  • 00:12:49 make this three seconds and also make
  • 00:12:52 the transition last three seconds here
  • 00:12:54 of course if I do this reload here now
  • 00:12:59 if I add a new item of course I should
  • 00:13:01 inspect this first if I add a new item
  • 00:13:03 here you see we have fade enter fade and
  • 00:13:06 reactive attached and now it's gone and
  • 00:13:08 again this is what I meant and behind
  • 00:13:12 the scenes fade enter is attached a tiny
  • 00:13:15 fraction of the time before fade enter
  • 00:13:17 active is attached so that we have this
  • 00:13:19 initial state before the final state but
  • 00:13:21 we don't really see that
  • 00:13:23 that's happening too fast and the sales
  • 00:13:26 of course true when I delete the item
  • 00:13:27 now you see we have failed leaf and fade
  • 00:13:30 leave active and it's gone so this is
  • 00:13:33 how this class works and how it animates
  • 00:13:35 this over time and allows us to animate
  • 00:13:37 the addition or deletion of items of
  • 00:13:39 course you could always use this to swap
  • 00:13:41 out a single item there are no borders
  • 00:13:44 to your imagination here the important
  • 00:13:46 thing is just use it when you do have an
  • 00:13:49 actual transition so when you change the
  • 00:13:52 content and not just if you want to
  • 00:13:54 animate a single element which doesn't
  • 00:13:56 change behind the scenes like
  • 00:13:58 individuals before what if you also want
  • 00:14:01 to animate this upon the initial load
  • 00:14:03 well first I will reduce this to 300
  • 00:14:07 milliseconds again here so that we have
  • 00:14:09 more of a real animation and not this
  • 00:14:12 very slow thing and then I want to add
  • 00:14:14 two new configurations here to the react
  • 00:14:17 CSS transition group
  • 00:14:18 the first one is transition appeared
  • 00:14:22 which allows me to specify true here
  • 00:14:25 which means also animate the appearance
  • 00:14:29 of this element and with appearance I
  • 00:14:32 don't mean when a new element has been
  • 00:14:33 added but when the page has been loaded
  • 00:14:35 so when this whole page appears so we
  • 00:14:39 also want to animate this and for this
  • 00:14:42 we also want to set up a timeout let's
  • 00:14:44 set us to 300 or let's set it to 500
  • 00:14:46 milliseconds or even a second so that we
  • 00:14:48 can see a difference now in the
  • 00:14:50 index.html I need to add two new classes
  • 00:14:53 because this takes their own classes
  • 00:14:56 it doesn't use fade entry by default it
  • 00:14:58 allows us to give it its own animation
  • 00:15:01 it is named fade appeared so here the
  • 00:15:05 theory is the same as above we set the
  • 00:15:08 initial State and then we have fade
  • 00:15:14 appear active here which will be
  • 00:15:18 attached as long as the animation runs
  • 00:15:20 and here I'll set the opacity to one and
  • 00:15:23 a transition for the opacity to one
  • 00:15:29 second since we set this ease out so
  • 00:15:34 that's important to understand it has
  • 00:15:35 its own classes
  • 00:15:37 it doesn't use fate enter now if I save
  • 00:15:39 this and go to this page and reload you
  • 00:15:43 now see it slowly fades in when we load
  • 00:15:46 this page instead of instantly being
  • 00:15:47 there this is how we can use the react
  • 00:15:51 CSS transition group to use CSS
  • 00:15:54 transitions or animations in general to
  • 00:15:58 animate the addition or deletion or
  • 00:16:00 swapping off content in our react.js
  • 00:16:04 render function here or our react.js
  • 00:16:07 HTML code here again to highlight this
  • 00:16:10 if your goal is simply to animate a
  • 00:16:12 single element let's say like before
  • 00:16:14 flipping a card then this is not for you
  • 00:16:17 normal CSS transitions and animations do
  • 00:16:20 that shop this is really only there for
  • 00:16:22 you if you want to swap elements add new
  • 00:16:25 ones
  • 00:16:26 delete ones like we're doing it here
  • 00:16:28 with that see you on all the other
  • 00:16:30 videos