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