Vue 3 Animations Tutorial #8 - Transitioning Between Elements

Key Takeaways

okay then so the next thing i want to show you is how to transition between two different conditional items in the template for example in our to-do's component we have this div right here which is outputting the li tags the ul and it has a v if attached to it and it says if we have length on the to do's then output this now if we don't then we fire this this v else and we output this instead so this is a bit of conditional templating we either output this or we output this so in essence these two things are swapping when we have no to do's this is swapped for this and we have to do is this is swap for this so when that happens if we get to not to do's then this is gonna go and this will enter and vice versa if we have to do's this will leave and this will enter so how do we then control the transitions between switching of those two items at the minute if we delete both of them it just kind of pops in that message and vice versa if we add some they just kind of pop in we do get the animation for this item but the message itself just pops out okay so how do we control that transition well you might think that we place a transition group around this because we have two different elements but only one of them shows at a time so we can just place a normal transition components around this let me do that like so and then what i'm going to do is scoot this in and give this a name and we'll set it equal to switch because we're going to switch between the two different things so all we need to do now is set enter transitions and exit transitions or leave transitions for these two things using the classes and then whenever we switch between this and this it's going to use those transition classes both of these elements so let's give this a whirl i'm going to scroll right down to the bottom over here and we're going to do our switch styles so let me do a comment to say switch transitions like so and then below that i'm going to say switch enter hyphen from and also i'm going to combine this with switch hyphen leave two because remember as we've been using these classes in the past the enter from and leave two are normally the same if we take a look at this leaf two opacity zero and scale 0.6 and enter from opacity 0 and scale 0.6 they're both generally the same because they're both going to the point at which they're no longer visible on the page so i'll group them together and we'll say opacity right here is going to be 0 and then transform is going to be translate in the y direction that's up and down and it's going to be 20 pixels so further down by 20 pixels all right so that's the initial state and the end state now i'm also going to do the switch enter 2 and i'm going to group that together with switch leave from because again those are going to be the same so this time it's going to be an opacity of one and also a transform where we'll say translate y and it's gonna be zero okay so finally we need our active classes so i'll say switch hyphen enter active like so and i'm going to say transition is 0.5 seconds and we'll say all before that in fact so it transitions all of the properties and also ease we finally need our switch leave active class and what i'm going to do is say transition in fact we'll just copy this right here it's going to be the same transition like so now there's a reason i'm not grouping these together and that's because we're going to add some more properties to this in a minute but let's just try this so far so if i delete this we can now see well it doesn't look great but at least it animated in it faded in and it came up from below now if i do the same for adding these you can see we get an animation out of the text and this kind of animated in from below again now the only thing is we have this kind of jerkiness whereby if we delete these it jumps right up at the end so that's because they're both kind of appearing in at the same time so first of all what i'm going to do is come up to the top and give this a prop this one right here of mode and we can say here either in out or out in and what that does is say look i want you to either do the in transition first and then the out one or the out one first and then the m1 we're going to go without in and that means that in that transition this will fade out first and then this will fade in and vice versa if we delete all of the to-do's this is gonna fade out first and then this is gonna fade in so they're not working at the same time so let me give this another try i'm gonna add a to-do okay that looks a bit better if i add some more and then delete these again looks a lot better all right so i did say i was going to add in some more properties down here but actually i don't need to so what i'm going to do is again just group these in together let me comma separate those like so and delete it and this should still work the same way let me give this a whirl yep everything looks pretty good and if i delete these yep looking nice as well cool so the last thing i want to do is actually get these two classes and comment them out because like i said before we don't actually need these because these are the default properties of the element on the page the default property of a div or an li tag is to have an opacity of one and the default transform if you like is just to be in its original position which is what this is so i'm gonna actually delete this and save it and see if this still works yep everything still works and if we delete those all still works