Transcript from the "Custom Transitions & Events" Lesson
[00:00:00]
>> Draw some types of transitions that just cannot be done with CSS. For example, we want to have this text writes on one character at a time as if someone would type in the letters out on a typewriter. And so this is the components marker, got the paragraph inside this invisible block and we've already applied the in typewriter transition.
[00:00:31] All that remains is to implement the typewriter function. So first we're gonna make sure the node the transition is been applied to is valid, which is to say that it just contains a single text node, And throw an error if that's not the case. We're gonna get a reference to the nodes text content, call it text.
[00:00:56] And then we'll set the duration of the transition to be determined by the length of the text multiplied by the speed option that is passed in, or we'll use the default option in the second argument to the function. Then we'll pass back that duration, so that slot knows how long the animation should take.
[00:01:20] And then this time, instead of passing a CSS method back, we're gonna pass a tick method. Again, it takes t, a value between 0 and 1, where 0 is fully off screen, and 1 is fully rendered, and then we're gonna count the number of characters that represents that t value, T times text.length.
[00:01:46] And then we're gonna insert, That value, Into the element. I think I've messed up somewhere. So I'm just gonna refresh the page and press the Show me down. And we have a typewriter transition. And just like the built in transitions, we can parameterize this, we can pass it some options, make it run very slowly.
[00:02:25] That was very fast. Very slowly, Or very fast. Now, transitions generate events on the DOM element, which is something that you occasionally need to do if you need to chain transitions together. So we can add event listeners for those events just like any other DOM element and then we're gonna have on this paragraph element which has the transition fly transition added some event handlers, When the intro starts.
[00:03:10] We're gonna set the status to, Intro started. We need to do the same for intro end, outro start, and outro end. And so the status is shown here. And as the transitions take place, the status updates. And that's transitions.