1 00:00:00,930 --> 00:00:03,960 React is very well known for rendering content to the screen. 2 00:00:03,990 --> 00:00:09,390 So if I have some amount of data I want to transform it into HTL I want to share on the screen react 3 00:00:09,450 --> 00:00:11,970 is a fantastic choice for that. 4 00:00:12,240 --> 00:00:18,360 Re-act is also very good at animation which is a very common requirement for many modern applications 5 00:00:18,360 --> 00:00:18,490 . 6 00:00:18,510 --> 00:00:23,760 So when I talk about animation I mean animating content on the screen make it move around make it a 7 00:00:23,760 --> 00:00:25,060 little bit more interesting. 8 00:00:25,080 --> 00:00:29,320 So let's spend a little bit of time to figure out how to anime items with react. 9 00:00:29,340 --> 00:00:33,180 I've got an example application here for right now it's very simple. 10 00:00:33,180 --> 00:00:38,910 All I can do is click the ad button that adds some items to a list and then I can also remove the items 11 00:00:38,910 --> 00:00:40,960 that will as well. 12 00:00:40,980 --> 00:00:42,350 I feel like right now. 13 00:00:42,360 --> 00:00:42,740 OK. 14 00:00:42,750 --> 00:00:48,450 You know maybe it achieves the requirements of my project or my application I'm showing data on the 15 00:00:48,450 --> 00:00:53,610 screen but wouldn't it be great if adding or moving items was just a little bit more interesting to 16 00:00:53,610 --> 00:00:58,440 the user or maybe just a tiny little animation when they get added or removed just to make the whole 17 00:00:58,440 --> 00:00:59,210 process. 18 00:00:59,320 --> 00:01:01,420 You know a little bit more polished. 19 00:01:01,440 --> 00:01:04,700 So let's take a look at how we would accomplish that. 20 00:01:05,040 --> 00:01:12,220 Re-act has a built in tool called CSSA transition group for animating lists of items. 21 00:01:12,420 --> 00:01:15,930 Let's take a look at a diagram to figure out how it works. 22 00:01:16,830 --> 00:01:22,200 So re-access says Transition Group is a component just like any other component that we create and react 23 00:01:22,200 --> 00:01:22,440 . 24 00:01:22,530 --> 00:01:27,930 So we will import it is a module that we install imported into a file and then will place it into the 25 00:01:27,930 --> 00:01:31,750 render method of some existing component. 26 00:01:32,190 --> 00:01:37,680 We take the re-access as Transition Group and we passed it a list of items that we want to animate. 27 00:01:37,740 --> 00:01:44,250 So these list items that we see all five of them are individual items that we want to animate. 28 00:01:44,430 --> 00:01:51,060 The way that reacts to us as Transition Group works is whenever an item gets added or removed from this 29 00:01:51,060 --> 00:01:55,440 list it will be added and removed in an animated fashion. 30 00:01:55,440 --> 00:02:00,060 So adding an item boom animate animated or sees me adding an item will animate it. 31 00:02:00,240 --> 00:02:04,930 If you remove an item will also animate the removal as well. 32 00:02:05,190 --> 00:02:11,700 The re-access says transition group works by adding class names to items as they are added to the list 33 00:02:11,700 --> 00:02:12,110 . 34 00:02:12,120 --> 00:02:16,800 So let's say we have a new list item and we're saying OK time some add the singlets to get into this 35 00:02:16,800 --> 00:02:18,220 list. 36 00:02:18,690 --> 00:02:25,800 3.x says Transition Group is going to render the component first and then give it a class name of some 37 00:02:25,890 --> 00:02:27,690 transition name that we provide. 38 00:02:27,690 --> 00:02:31,890 So this transition made right here might be like Fade in or something. 39 00:02:32,130 --> 00:02:33,110 Dash enter. 40 00:02:33,120 --> 00:02:37,600 So at the end of the day the class name will be something like Fade in dash and turn. 41 00:02:37,860 --> 00:02:42,020 And that class name will be used for initial styling of the components. 42 00:02:42,270 --> 00:02:49,470 After the initial render occurs the class transition named dash enter dash active will then be applied 43 00:02:49,510 --> 00:02:50,060 . 44 00:02:50,520 --> 00:02:52,020 The dash enter dash. 45 00:02:52,020 --> 00:02:55,870 Active is what actually makes the animation happen. 46 00:02:56,040 --> 00:03:02,280 So we've got one class name for a kind of initial state and a second class name here for the doing the 47 00:03:02,280 --> 00:03:04,280 actual animation. 48 00:03:04,290 --> 00:03:10,980 So let's take the example that we have in the browser ready and put this to put this into practice. 49 00:03:11,130 --> 00:03:13,440 I've got my component here. 50 00:03:13,440 --> 00:03:18,420 The first thing I'm going to do is import the reacts says Transition Group at the top of the file. 51 00:03:18,450 --> 00:03:27,640 So import react see SS transition group from re-act add ons. 52 00:03:27,790 --> 00:03:32,610 C Ss Transition Group. 53 00:03:32,610 --> 00:03:34,550 Now remember this is a component right here. 54 00:03:34,650 --> 00:03:38,330 So I'm going to go and find the list of items that are being rendered to the screen. 55 00:03:39,360 --> 00:03:40,560 Here's my render method. 56 00:03:40,590 --> 00:03:41,740 I've got to here. 57 00:03:41,760 --> 00:03:47,520 And inside the UL is my list of quotes is what I'm calling them but they're essentially just line items 58 00:03:47,520 --> 00:03:50,450 individual allies that are being rendered to the screen. 59 00:03:50,580 --> 00:03:55,390 I'm going to wrap this list with re-act VSS transition group. 60 00:03:55,500 --> 00:03:59,040 So remember it is a component just like any other. 61 00:03:59,040 --> 00:04:03,690 Now we need to provide a little bit of customization to the re-access as transition group just to tell 62 00:04:03,690 --> 00:04:06,800 it hey here is exactly how you're supposed to animate items. 63 00:04:07,080 --> 00:04:11,880 If we executed this right now and ran in the browser there would be no animation because we're not providing 64 00:04:11,910 --> 00:04:15,270 any customization to the transition group just yet. 65 00:04:16,080 --> 00:04:22,450 So inside the render method I'm going to define some transition options. 66 00:04:22,500 --> 00:04:27,050 So these are options that we're going to pass to the reacts yesses transition group. 67 00:04:27,090 --> 00:04:32,820 Normally we would pass or we would define these just inline right inside the tag as props just for this 68 00:04:32,820 --> 00:04:36,870 example I want to define it as a separate object so that we can easily talk about all the different 69 00:04:36,870 --> 00:04:41,880 properties that we have to make use of the first property we're going to define is going to be the transition 70 00:04:42,000 --> 00:04:42,960 name. 71 00:04:43,020 --> 00:04:47,700 So our transition we might have many different animations inside her application. 72 00:04:47,820 --> 00:04:53,280 This transition name is going to specify a very specific type of animation we want to use. 73 00:04:53,400 --> 00:04:56,360 So I'm going to call this one favor. 74 00:04:56,660 --> 00:04:57,560 Nice and simple. 75 00:04:58,770 --> 00:05:02,670 Next we're going to tell the transition how long it should animate for. 76 00:05:02,850 --> 00:05:09,080 So we'll provide transition and her time out and this takes a millisecond value. 77 00:05:09,160 --> 00:05:12,580 So going past 500 which means 500 milliseconds. 78 00:05:12,880 --> 00:05:19,290 Finally we also need to specify how long an animation will take when it is being removed from the list 79 00:05:19,300 --> 00:05:19,640 . 80 00:05:19,870 --> 00:05:25,330 And we do that with transition leave timeout cool. 81 00:05:25,380 --> 00:05:29,570 So now we just have to pass these options to react CSSA transition group. 82 00:05:29,690 --> 00:05:30,330 I'm going to do. 83 00:05:30,320 --> 00:05:35,740 To do so with the spread OPERATOR So transition options. 84 00:05:35,860 --> 00:05:40,080 Again usually we would just define all these props in line right on the tag. 85 00:05:40,080 --> 00:05:43,630 We're going to do it just this slightly different way this time just to make sure it's nice and clear 86 00:05:43,650 --> 00:05:47,190 exactly all the different options that we're passing in here. 87 00:05:47,690 --> 00:05:48,030 OK. 88 00:05:48,040 --> 00:05:50,580 So let's go back over to our diagram one more time. 89 00:05:50,580 --> 00:05:54,750 So this transition name is what we defined as fade. 90 00:05:55,020 --> 00:05:59,620 So now to actually get some styling or some interesting animation going. 91 00:05:59,620 --> 00:06:07,630 We have to define a CSSA class of Faid dash Enter that's going to have some amount of initial styling 92 00:06:07,620 --> 00:06:10,060 for a list item when it gets added. 93 00:06:10,060 --> 00:06:19,030 We will also define Faid dash entered dash active as a class to kind of describe exactly what the animation 94 00:06:19,030 --> 00:06:21,340 should look like as it occurs. 95 00:06:21,390 --> 00:06:22,950 So let's give this a shot. 96 00:06:23,520 --> 00:06:28,660 One quick thing let's flip back over do a quick refresh make sure everything still works. 97 00:06:28,670 --> 00:06:31,860 It looks like I got a little bit of a typo in here. 98 00:06:31,930 --> 00:06:34,780 Let's check it out. 99 00:06:34,840 --> 00:06:36,360 Oh boy that's an embarrassing one. 100 00:06:36,370 --> 00:06:38,440 I put the closing tag on the wrong side. 101 00:06:38,470 --> 00:06:43,090 It happens. 102 00:06:43,120 --> 00:06:44,880 Let's refresh again. 103 00:06:46,020 --> 00:06:46,890 And cool. 104 00:06:46,890 --> 00:06:49,970 So as you can see right now we're not getting any animation just yet. 105 00:06:49,990 --> 00:06:56,320 So we still need to define some SS classes to describe exactly how the animation should look. 106 00:06:56,940 --> 00:07:02,250 So I can open up my CSSA file that I've already hooked up here and I'm going to define a couple of different 107 00:07:02,250 --> 00:07:03,120 classes. 108 00:07:03,340 --> 00:07:07,270 So remember my C-s are using my transition name is fade. 109 00:07:07,300 --> 00:07:13,740 So I need to define Faid dash enter as kind of the starting state of my transition. 110 00:07:13,890 --> 00:07:17,050 So I use Faid dash enter. 111 00:07:17,250 --> 00:07:18,480 So this is going to be the 112 00:07:21,880 --> 00:07:25,810 loops starting state of animation 113 00:07:28,760 --> 00:07:29,810 and I'm also going to find. 114 00:07:29,860 --> 00:07:37,410 Define a end state of animation as Faid dash enter dash active. 115 00:07:37,440 --> 00:07:44,500 So for my starting state we'll define a right of 100 pixels that means this is the initial styling when 116 00:07:44,500 --> 00:07:49,500 that line first comes onto the screen give it a right of 100 pixels. 117 00:07:49,500 --> 00:07:52,660 So it's going to be a you know just a little bit offset. 118 00:07:52,770 --> 00:07:58,090 Next we'll define the end of State animation at the time that the animation ends. 119 00:07:58,120 --> 00:08:03,210 I want the right to be 0 pixels so it should be just absolutely lined up with everything else. 120 00:08:03,220 --> 00:08:08,200 Now here's the magic the last part is will define a transition. 121 00:08:08,190 --> 00:08:13,010 So for the transition we're going to say run the transition for 500 milliseconds. 122 00:08:13,300 --> 00:08:19,470 I want to ease in and I want to transition all properties that are being changed between these two classes 123 00:08:19,500 --> 00:08:19,860 . 124 00:08:20,220 --> 00:08:21,130 So let's give this a shot. 125 00:08:21,130 --> 00:08:22,920 Now I'll flip back over. 126 00:08:22,990 --> 00:08:24,740 Let's refresh. 127 00:08:24,750 --> 00:08:25,950 I'm going to add some items. 128 00:08:25,960 --> 00:08:31,570 And as you can see they're getting animated when they are added to the page Awesomes is definitely works 129 00:08:31,560 --> 00:08:32,010 . 130 00:08:32,010 --> 00:08:35,650 Let's also go through an animation for removing items as well. 131 00:08:35,670 --> 00:08:41,400 I can remove items right now but there's no animation to it for this. 132 00:08:41,380 --> 00:08:45,120 We'll use the fade and this one is slightly different. 133 00:08:45,180 --> 00:08:47,420 It'll be Faid dash leave. 134 00:08:47,860 --> 00:08:54,790 So this will start at zero pixels fade dash leave dash active. 135 00:08:54,800 --> 00:08:59,000 So this is the end state of the animation right. 136 00:08:59,010 --> 00:09:05,890 We'll be let's say let's take it the opposite direction so we'll go 100 pixels negative and again will 137 00:09:05,880 --> 00:09:12,050 transition point five seconds is out this time all. 138 00:09:13,330 --> 00:09:19,690 So now if I add some items that are animated when they come in and when I remove them they fade out 139 00:09:19,680 --> 00:09:22,360 to the right. 140 00:09:22,510 --> 00:09:25,390 There's a lot more styles of animation than we can do than just that. 141 00:09:25,380 --> 00:09:27,330 So let's check out some more interesting ones. 142 00:09:27,340 --> 00:09:28,340 Let's say you know. 143 00:09:28,410 --> 00:09:33,360 All right animating the right property that that's OK but maybe we can make things a little bit more 144 00:09:33,370 --> 00:09:34,340 interesting. 145 00:09:34,570 --> 00:09:35,810 Let's try it out. 146 00:09:35,830 --> 00:09:43,390 This is going to go off the deep end so I'm going to say I want to transform rotate the item 90 degrees 147 00:09:44,010 --> 00:09:45,340 on the x axes 148 00:09:48,040 --> 00:09:50,700 and 90 degrees on the z axes. 149 00:09:50,980 --> 00:09:51,560 Oops. 150 00:09:51,630 --> 00:09:57,930 Degree like so and then by the time that it finishes animation transform 151 00:10:02,340 --> 00:10:10,280 0 degrees on the X and 0 degrees on the Z. 152 00:10:10,990 --> 00:10:13,110 Let's see what this looks like now. 153 00:10:14,010 --> 00:10:19,520 So when the item gets added It will be rotated 90 degrees on the x axes and z axes. 154 00:10:19,750 --> 00:10:20,250 And so. 155 00:10:20,250 --> 00:10:21,540 Wow that's pretty intense. 156 00:10:21,550 --> 00:10:23,400 Check that out. 157 00:10:23,400 --> 00:10:27,940 At the same time we can also mix additional properties in here as well so maybe we want this to fade 158 00:10:27,930 --> 00:10:28,420 in. 159 00:10:28,410 --> 00:10:36,370 I can also add in the opacity of starting at zero and then ending at 1. 160 00:10:36,390 --> 00:10:42,450 So now when I add an item it should rotate in but it should also Fady and at the same time and so having 161 00:10:42,450 --> 00:10:48,000 the two animations mixed here is a little bit confusing but you can definitely get can get that sense 162 00:10:48,000 --> 00:10:52,860 of fading in as the item comes in. 163 00:10:52,870 --> 00:10:57,920 We can also go ahead and change up the leave as well so maybe we want it to just do a nice fade. 164 00:10:57,930 --> 00:11:03,370 We can start at one opacity and then we can fade out to zero over time. 165 00:11:03,370 --> 00:11:04,890 So let's give this a shot now. 166 00:11:05,250 --> 00:11:10,630 So when the item is removed from the screen it's going to start at full capacity by the time it ends 167 00:11:10,620 --> 00:11:11,700 it'll be at zero. 168 00:11:11,800 --> 00:11:16,480 So now we can see up comes and fades out very nicely. 169 00:11:16,480 --> 00:11:20,220 Cool so this is animation with react to do the animation. 170 00:11:20,230 --> 00:11:23,200 We use the react CSSA transition group. 171 00:11:23,250 --> 00:11:23,910 We passed it. 172 00:11:23,910 --> 00:11:30,430 The duration of the transition and also the transition name is well within to find a couple of CSSA 173 00:11:30,420 --> 00:11:32,080 classes. 174 00:11:32,110 --> 00:11:39,970 Each class consisted of the transition name and then the starting state and the end state and between 175 00:11:39,960 --> 00:11:45,190 these two states we applied a starting starting style and ending style. 176 00:11:45,370 --> 00:11:51,600 And then how long that style should be transition between the last thing to keep in mind about re-access 177 00:11:51,710 --> 00:11:56,650 as transition group is that it is used to add items and move items from lists. 178 00:11:56,640 --> 00:12:02,250 So if you are rendering any type of list this is a fantastic add on to use just to give your application 179 00:12:02,320 --> 00:12:05,510 a little bit more style to it. 180 00:12:06,150 --> 00:12:11,430 If you enjoy this screencast I encourage you to sign up for the weekly newsletter at rally coating dot 181 00:12:11,430 --> 00:12:11,840 com. 182 00:12:11,860 --> 00:12:18,580 We've got weekly screencast on react and general javascript ecosystem topics really look forward to 183 00:12:18,580 --> 00:12:22,050 talking to you next week about whatever topic we come up with. 184 00:12:22,060 --> 00:12:27,160 Always feel free to tweet or leave me a Facebook message asking for particular topics and I would love 185 00:12:27,150 --> 00:12:33,170 to help you learn all the nice little parts of the JavaScript ecosystem so I'll catch it next week.