This course has been updated! We now recommend you take the Introduction to Vue 3 course.
Transcript from the "Transition Modes" Lesson
[00:00:00]
>> Sarah: So lets talk about transition modes. We talked about slots earlier and we talked about some of the directives. There is a lot of stuff in Vue that makes it so much easier to work with. Just like a small thing that you don't have to keep doing, like dot prevent.
[00:00:17] How much do you use event, dot prevent, default? You don't have to keep writing that. You can just attach it to that click handler. Transition modes are one of those things. Transition modes are one of those awesome things that, actually, other libraries are borrowing now, too. There's a way to use this in React now, because people are moved from Vue to React now for a client project, and we're like, no no no, I can't do without my transition mode.
[00:00:42] So let's talk about them really quickly. We had mentioned before that transitions are really powerful because things in real life, unlike computer life, don't just pop in your face. Well, there's a point in time when something is entering and something else is leaving, what will usually happen is there's a point where both of them are transitioning and they both exist in the dom at the same time, and then it goes away.
[00:01:10] So this button is from the the docs, that's an example of one of those times, it kind of goes and then it comes. And the way that we usually handle this, in animation land, is a few of different ways and CSS animations will cost cause a delay on one of those things entering, that's like the length of time of the thing exiting.
[00:01:31] So that it won't appear like it's going to do something. That's a little messy, because if you decide that you wanna change the amount of time that that thing is transitioning or something about that animation, you have to go back and find that delay, as well, and change that into places.
[00:01:47] If you're working with JavaScript animations, you have to register a callback and then you get into these kind of callback hells. This other thing is done, and then it's gonna let you know that the other thing's done. So this is actually a really really common use case that we have to deal with, so transition modes, and this is an interesting one I saw on Amazon the other day where it's just like one thing is showing up and the other thing is going.
[00:02:12] So without really good transitions we kind of lose an opportunity. What transition modes will allow us to do is specify an order for those operations, so it will allow us to say, okay let that thing go away and when it's don, I'm gonna kick the next one off and it will all come in to the dom, and you don't have to write any callback, you don't have to write any weird delays or anything.
[00:02:39] You just have a v-if/v-else's and write in out or out in and Vue will do all of that logic for you. No matter what you do, no matter what you change, it's gonna listen for it to be fully gone and then it's gonna bring the other thing on.
[00:02:52] It's so cool. So in-out, the current element waits until the new element is done transitioning in to fire. Or out-in, the current element transitions out and the new the element transitions in. Pretty much, you're always going to use Out-In. Like almost every single time because that's the thing coming out fully and then the new thing coming in.
[00:03:14] The other one doesn't make too much visual sense, but you can play around with it and and see what I mean if you want to. So if we're gonna show, I'm gonna show you what this transition mode looks like. We've got mode is out-in, we've got a transition, we've got a name flip, we've got a mode out-in and we got the slot of if showing and we've got this image source.
[00:03:36] So if we look at this demo ooh sorry. And so if we look at this demo, we can hover these guys and I can replace these images. They look like they're one thing folding, but they're not, they're two different things one is fading out, one is like transitioning out, and going like this.
[00:03:56] And the other one is like immediately transitioning in. So it ends up looking like a card that's flipping, but that's because I know that Vue has got my back and that out in is going to fire as soon as that one leaves the next one is going to be able to come in and it'll look like one continuous motion, so that's pretty nice.
[00:04:15] If we don't have these transition modes, what ends up happening is we have one fade out, and the other faded in, but you didn't see it. Because it happened behind the first one, so they happened at the same time. You see a lot of animations that look like this all over the web, just because it's too hard to implement it the other way.
[00:04:33] But now Vue gives you a really really easy quick way of working with that. So we've got our flip interactive, and our flip interleave. We've got flip enter and flip leave too, so we actually have to be kind of specific that they're gonna scale y, so that's gonna.
[00:04:51] It's gonna look like it's going like this but really it's just scaling Y down this way and remember we've got that translate Z is zero on it.
>> Sarah: Okay, those were you know I built them up, but they were actually really easy, you just slap it on the transition.
[00:05:09] We don't have to go into them any further.