In the last lecture we added css transitions,
now one obvious thing we can use instead is a css animation.
Now in case you're not aware, a css animation also has nothing to do with react as css animation simply
allows you to define a bit of a more complex and controlled animation than with the transition prop
because with the transition prop, we are just saying hey whenever any property changes, animate that change
and figure out how to animate it on your own basically. Now an animation, a css animation is a detailed
described set of steps you want to execute,
for that you create so-called keyframes with @addKeyframes, then you give these keyframes any name of your
choice like openModal
and then here you can define the steps, so inside the animation in percentages or just with from and
to if you only got to but we could say we want to start at 0% and then that's the syntax, then we
want to have
a certain state at let's say 50% of the animation and we want to end with another state.
Now inside these states, you use normal css properties to describe how the object should look like
at this point of time. So since this is the open modal animation, we can say when opening it, we're starting at an
opacity of zero and we transform this to be moved up to the top.
Now let's say at 50% of the time, we want to have opacity of 1
so it's fully visible but we actually move this 20% to the bottom, so it's not in the final position
but actually moved a little bit too far down and only at 100%,
we move it to its final destination with translate 0.
Now with that, we can use open modal in our modal open class because this is the class which gets attached
when the modal should be shown
and I no longer need to set opacity and transform here, instead
here I call animation that's a special property which now allows us to define a set of keyframes which
should be executed whenever this css class is present on an element and that of course includes when
it is added to an element.
So here I want to execute the open modal animation,
then again we need to define a timing
So let's say we want to show this over .3 seconds
or maybe .4, then we also can define an ease-in function which defines how it moves between our individual
steps here
and we also have to define if it should repeat this animation or end at the state we end at in this
animation. If we don't define anything it would jump back to the starting state once the animation play
through,
if we want to keep the final state, so in 100% state we actually have to add the forwards value
here so that it keeps the final animation step.
Now with that, if we save this file and I click open modal, you'll see it bumps a little bit,
it slides down and then slides up,
do you see this tiny bump here,
that is because we push it 20% down after 50%.
You can't see it, let's simply increase this to 90% and that it should be really easy to see,
now if we open the modal you see it jumped on much further and then moved back up again.
So now we're using a css animation and we're taking advantage of the fact that this is simply
added or played
when this class is added.
Now for closing, we can of course also define a set of keyframes
so let's quickly add close modal here and now we want to play the opposite,
so we start at the opacity 1 and are at the position
well the element sits at, after 50%
we maybe have an opacity of let's say .8
so still quite visible but we slid this down a little bit and then after 100%, we got opacity
of 0 and we move this out of the screen with -100% on translateY.
Now we only need to use the close modal animation and like for modal open, we make sure that this gets
added whenever the modal close class is added,
so there we play the close modal keyframes set.
Now with that if we save this, let's see it in action, opening works as before, dismissing also now plays
our animation
and that is of course quite nice because now we're again controlling everything with css but we get
more controlled with the transition property because the css animation property allows us to
play our own set of keyframes which we do here.
And again this has nothing to do with react but it is important to recognize that this doesn't make
it worse or bad,
you can absolutely use that and in a lot of cases, css animations might give you all the power you
need to achieve certain animations or looks.