All language subtitles for 010 Transition Events_en

Now in the last lecture, we talked about the timings,

now sometimes you want to execute certain code when the state of the animation finishes and not just

change what you render to the screen,

for that you get various callbacks, you can add functions you can execute to a transition,

I'll go back to the app.js file and do this on this transition component

we used to wrap this red block. We get six different events

we can listen to on this transition component,

the first one is onEnter and there, I'll simply execute a function where I console log onEnter so

that we can see when this happens,

the second one is onEntering so let's print onEntering. The third one is onEntered

and you might of course be able to guess when these methods are executed.

We also got onExit which should print onExit here and then you might be able to guess that, we got onExiting

so let's also print this to the log here and then we got onExited, like this.

Now these six different props can be bound to functions as I just did it here

and then you can run any kind of code you want and they execute in this order, onEnter is executed

right before we enter the entering mode, onEntering is then executed once we entered the entering mode

and onEntered is executed once we entered the entered mode,

well that's a lot of entering. Exit and so on behaves the same, onExit is used when we start the exiting

mode right before it to be precise, onExiting is then executed when we are in the exiting mode and exited

once we are in the exited mode. Let me save all of that and let's simply see it in the console log, if I

click toggle here for the red button, you see onEnter, onEntering and after this one second it takes,

onEntered and the same for removing, onExit, onExiting and onExited. This can be nice to create

staggered animations where you want to wait for one animation to finish before you start the next

one.

With these methods, you got all the control you need to find out what happened, what finished, what

started

and then time your animations based on that,

for example.