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.