This course has been updated! We now recommend you take the Svelte Fundamentals course.
Transcript from the "Local & Deferred Transitions" Lesson
[00:00:00]
>> There's one final piece of transitions, which is we can distinguish between what we call global transitions, and local transitions. Ordinarily, the transition will play whenever an element is created, or destroyed. Regardless, of the state change that led to that element being created, or destroyed. So for example, we want these transitions to apply when the length of this block is changed.
[00:00:34] But if we toggle, whether the list as a whole is shown, we don't want this effect. We want the list to vanish altogether in an instant, and then come back in an instant. And the way that we can do that is by taking this mark up, and making this a local transition.
[00:00:51] Which means that it will only apply, when this is the thing that changed as opposed to this. And just like with event modifiers, we modify our transition by adding a pipe like so. And adding the name of the modifier, which is local. So, now this is going to work the same way as before but, when we toggle this the elements vanish, and reappear instantly.
[00:01:23] Now before, when we implemented our own transition function, we returned an object containing the transition options directly. But there are some situations, in which you don't yet have the information that you need, to return that object. An example would be, if two transitions are happening and they need to be aware of each other, in some way.
[00:01:44] So what you can do, is you can return instead of the options object you, can return a promise that resolves to that option objects. So an example of why you would need this is, if you have a set of elements, and you want them to look as though they're transitioning from one side to the other, Instead of just appearing and disappearing, right?
[00:02:08] So, we want these two dues to move from the to do list, to the done list, and then back again in a graceful manner that more Accurately, reflects how objects behave in the real world. And is therefore, a nicer experience for users, and the way that we do this in spell, is with something called the crossfade function.
[00:02:30] Crossfade returns a pair of transitions that talk to each other, so returns an array, and we're gonna destruct that array into send, and receive. And this is quite involved, so I'm not gonna walk through all the code but, we're just gonna go through the tutorial. Find the label element on line 65, and add those send, and receive transitions.
[00:02:54] Down here, lines 65. On intransition we're gonna receive. And we're gonna pass it the key, which is gonna allow spell to get the send, and receive the correspond to each other. But then we're gonna do the same thing for the other label element, down here. This is representing the two dues that have already, been done which is the list of two dues on the right.
[00:03:51] And now if I've set this up correctly, when I toggle one of these items, it's gonna move gracefully from one side to the other. That's pretty good, but it's not perfect because when we toggle buy some milk for example, even though that to do will move smoothly, to the bottom of the to do list.
[00:04:20] The other three items are gonna jump into their new place, which isn't ideal. So we're gonna fix that in the next chapter.