4.2 Adding Transitions

At the end of the last lesson, we got ourselves into a bit of a predicament where we started to introduce the idea of Vue states which is good, so we could transition between a quizzes Vue state and a cards Vue state. But the problem there we introduced there were actually two. The first one was the fact that the transition between the quizzes list and the cards list here was harsh. It was very abrupt, not very aesthetically pleasing, so we want to adjust that a little bit. And now that we're in this cards Vue, there's no way for me to go back. So those two things we want to handle in this lesson and we're going to handle them via a concept in Vue.js known as a transition. So let's head back over to our code here and in our QuizList.vue we want to introduce this idea of a transition because we're transitioning between this quizzes Vue state and this cards Vue state. Now, the way that we start doing that is by introducing a transition element, which is specific to Vue.js. And the way that we use that is, we take the things that we want to transition in between, and we stick them inside this transition element, that's step one. Step two is we need to let this transition know what these states are. And we do that via the key attribute kinda similar to what we've seen before. So what we wanna do here is we actually want to wrap whatever elements that are specific to certain states kind of in their own wrapping div, that's just kind of a good practice. So let's create a new div here and we're gonna take this quiz and we're gonna cut this out and we're gonna stick it in this new div like that. Now, not only we're gonna do that, we're also gonna remove this v if from the quiz and we're gonna take, and we're gonna stick it up here at this dip. Now I think you could probably leave it at quiz but I like to put it up at the highest level just cuz I think that makes more sense. Now also what we're gonna have to do as I said before, is we have to provide a key for this state of this transition and the key that we are going to use Is quizzes. So this is going to be the quizzes state as far as Vue.js cares for this particular transition. Now, we're also going to do something similar down here for our flash card Vue our cards Vue. We're gonna create another div and we're gonna do a similar action here where we're going to take this Vue state logic out of this guy right here. And we're gonna stick it up at the next level, right here. Then we'll take anything that we wanted to do with these particular cards and we're going to stick them in here, okay. So now we have created a transition element, and we have wrapped whatever those kind of Vue states are, those transition elements that we want to transition between in wrapping divs, and we put our check for those states on those wrapping divs. Okay, so we really haven't changed much yet. So actually, if you were to save this and go back and we wind up seeing the same thing. You saw a little bit of a flicker there didn't you though? So if you look carefully, you're going to see a flicker whereas you can see the definition, the words and definitions appear below the list and then all of a sudden the lists disappeared. So once again, it's still kinda harsh, we need to adjust that. But in order for us to adjust that, we need to understand how this transition thing really works. Now, the way transition works in Vue.js is that behind the scenes, Vue.js is going to apply classes as states to our wrapping element divs here as we transition through the different stages of the transition. So there's several of those classes that get dynamically applied to these divs as we go through the stages, but we really only are gonna care about a few. And those few are going to be enter active, leave active, enter and leave to. So I'm gonna show you how we can use those. So the nice thing is that we can get access to those classes from within our component and we can do things with them. So let's come down in here into style and I'm gonna show you what those particular CSS classes look like. So as I mentioned we have enter-active and we also have leave-active which means that the transition has basically finished and we are in the active state of enter and the active state of leave. So in this case, we're simply going to do a transition and we're gonna transition the opacity property, and we're going to do it over the course of .5 seconds. So that's nothing too crazy. Then, we are also going to handle the .enter and the .leave-to classes and basically these are the I am going through the process of entering and leaving and in this case I'm simply going to set the opacity value to 0, so let's go ahead and and save that. We come back over here, let's refresh our page and let's go ahead and click. And you kinda see the same thing is still happening on, still happening, it's kind of still very clunky and we need to fix that. Now the traditional way that we're gonna handle this we wanna take advantage of these CSS states, but usually the way you handle that is you give your transition a name. So this is going to be a very specifically named transition because basically you can transition several different places on a page and if you keep using the same transition, you're going to transition between all the same CSS states. So what we can also do here is we can provide this a name, and we're going to say, we want this transition to be a fade, which is kinda what we're trying to define. So by doing that, by giving this a name what Vue.js does behind the scene is it takes this name and it pre-pins it to these class states, by saying fade-enter-active, fade-leave-active and then fade-enter, and fade-leave-to, like that. So let's go ahead and save that. So that's kind of a nice thing to know is that I can create multiple transitions in a single template on a single component, and if I just name them differently I can handle them all differently as I go. One other thing that I have to add up here is I want to add in the key for my div here and this is going to be the card's state of my transition. So now that I've given my transition a name, and I have my divs having keys and I have all my other logic here. And I've defined what I want to do for these particular styles, and I've saved everything. If I come back over here and I restart my application, if I click on this, you now see I get a little bit of a softer transition, did you see that? Let's replay that. I do get a fade in, fade out effect, but there's still kind of a skip in there. If you look closely you're gonna see that the terms and definitions did appear first, and then kind of faded in, and then the other quizzes kinda faded out. So that's still a little jumpy. Now, there's a way to fix that as well. Now if I want both of these things to kinda happen at the same time, I can provide a mode to my transition. Mode, which is going to be typically one of two values. It can out in and in out, which means the first state that I'm currently in, I want to transition out, and then I wanna transition in the next state. In out is the opposite where it's gonna transition in the new state, and then it's gonna transition out the old one. So I can say out in. And if I save that, come back over here and refresh my page. If I go ahead and hit this, you're gonna see now it's much smoother and we don't get that kinda jumpy effect where we're going to go, we're gonna transition out first and then in with the new. So we're starting to look a little bit better, but the problem here is that we're still not able to go back. So let's go ahead and fix that now. So in this secondary Vue state of cards, I wanna add in a button, I wanna add in some functionality that's gonna allow me to get out of here. So I'm gonna add in a button here that's gonna be a ui labeled icon button back. And then within this button, I want to create an icon like I've done before, and this is going to be in arrow circle, left icon. So I want to show that you want to go back, kind of to the left. And I'm gonna give this some text, that says back. So let's go ahead and save that. Let's see how that's looking. Let's go ahead and refresh our page. Let's click on it. Okay, so we're getting there a little bit but our text here obviously is not what we want. So let's come back over here and obviously this is not where that belongs, it's going to be part of a class so let's add that in there. We'll save that. And now if we were to refresh this, now you can see that it's looking a little bit better, right? But if I click it, nothing's happening and this is awfully tight here, so let's add some functionality to this click, on this button, and then we'll drop these cards down just a little bit. So the first thing that I'm going to do, is I will add an id to these cards down here. We're just going to call this card_view, and we'll save that. Let's come down to our styles again. In this case we're gonna say card_view and then we'll just say we're gonna give this a margin top of say 30 pixels just to push it down a little bit and that worked really well, that looks pretty good now. But now when we click on this I want to transition back to that other state. And the way that we're going to do that is just like we've done before, so we're going to come to our button. We'll say v-onclick and I'm going to say at this point I wanna view quizzes, like that. So then all we need to do is come down into our methods, we're going to say view quizzes, and then within here we'll just say that the view state is going to be equal to quizzes, just like that and save. Now let's come back over here, lets start again, and we're gonna transition over here where you can see everything now and we can also transition back. So now we have this nice kind of multi state transition back and forth using transitions in Vue.js.