You've already seen how transitions can work with VIF in order to transition elements that are either displaying or hiding from the screen. You can also do the same thing with VShow. And that's probably pretty intuitive. You probably already guessed that.
However, did you know there were even more times when you could use the transition element? In other words, it's not limited to just hiding and showing elements. Let me show you those in this video. We're going to start by taking a look at using the key attribute in order to trigger a transition.
So inside of my code right now, I've created a seconds counter dot view component. Over an app dot view, I'm simply importing that component and using it. Now, what does seconds counter look like? Well, I have installed view use.
And out of that, I'm getting the use now composable in order to get a reactive current time. Then I'm creating a computed property that just gives me the current number of seconds and the current time That's why over on the right hand side. You can see my seconds ticking up as the video continues now you'll notice I do have my span down here that's printing out the seconds wrapped with the transition component and In the style section. I do have the proper Classes in place so you would think that this transition should be working however Over in the browser, you can see that the seconds are clicking one to the other without any transition in between.
This is because we need to tell view that each iteration of this span should be a new DOM element, right? Right now, all it knows is that it should change out the text node. We need to tell it that every time a second clicks, this whole entire span should be re-rendered and thus we should have a transition between the two spans. we can do that with the key attribute.
So I should set the key to something unique per second, which of course is going to be the seconds. Excellent. Now over on the right hand side, you can see we do get this nice little transition between each of the seconds. Notice that when I do use the key and I'm transitioning between two elements, not just a single element in and out like with VF, but with two elements, I do have to make up for the fact that they will both exist at one time.
So down here, I've created a position of relative on the wrapper div that wraps the span here. And I've positioned the seconds. Absolutely. So notice if I comment this out, you'll see what the behavior looks like and why we should account for this.
Yeah, see in the browser now, they kind of click one of the other. That's because one exists at the same time as the other one. And so, yeah, it doesn't look that great. That's just something to note.
when you use the key in order to trigger transitions. Typically, that's just going to mean positioning something. Absolutely. Another instance where you can use transitions is when you're switching out the value of a dynamic component.
Let me show you what that looks like. view, I've imported a dinner component, and then I'm using it on the page. That dinner component looks something like this. I'm importing a spaghetti component.
and a dumpling component. Each of those components just includes embedded GIFs of the proper food. Then I'm creating a variable here called I want Italian. It's going to start out as true.
And then we'll create a computed variable called food to eat. And when I want Italian is true, then we want to show the spaghetti component. Otherwise, we're going to show the dumplings component. Then down inside the template, I'm using the transition component.
to wrap the dynamic component here, and I've provided an input where we can toggle the value of i1 Italian. Of course, at the bottom, we've also provided the proper classes in order to make the transition work. Now, over on the right-hand side, since we have the transition wrapping the component here, the dynamic component, then it should fade in and out between the two different GIFs. Let's see if it works.
So, I want Italian, shows the spaghetti eating girl here. When I uncheck it, sure enough, we get the dumplings. Very cool. Now, it did transition.
However, you saw there was still that kind of jump there, right? This is the exact same issue we ran into when using the key, that both of them existed in the DOM at the same time. In order to remedy this, we could do the exact same thing by positioning the elements absolutely. but I wanted to show you one more solution to this problem and that is providing the mode prop on the transition.
The mode that I want to use now is called out in. This tells view that I want to apply the transition completely in and then completely out again on an element before applying the transition to the new element. Let's give the page a refresh and see what it looks like this time. Notice the first element transitions completely out.
and only after that is the new element added on the page. So there you have it. Now you know all the ways in which you could use the transition component. You've already seen how transitions can work with VIF in order to transition elements that are either displaying or hiding from the screen.
You can also do the same thing with VShow. And that's probably pretty intuitive. You probably already guessed that. However, did you know there were even more times when you could use the transition element?
In other words, it's not limited to just hiding and showing elements. Let me show you those in this video. We're going to start by taking a look at using the key attribute in order to trigger a transition. So inside of my code right now, I've created a seconds counter dot view component.
Over an app dot view, I'm simply importing that component and using it. Now, what does seconds counter look like? Well, I have installed view use. And out of that, I'm getting the use now composable in order to get a reactive current time.
Then I'm creating a computed property that just gives me the current number of seconds and the current time That's why over on the right hand side. You can see my seconds ticking up as the video continues now you'll notice I do have my span down here that's printing out the seconds wrapped with the transition component and In the style section. I do have the proper Classes in place so you would think that this transition should be working however Over in the browser, you can see that the seconds are clicking one to the other without any transition in between. This is because we need to tell view that each iteration of this span should be a new DOM element, right?
Right now, all it knows is that it should change out the text node. We need to tell it that every time a second clicks, this whole entire span should be re-rendered and thus we should have a transition between the two spans. we can do that with the key attribute. So I should set the key to something unique per second, which of course is going to be the seconds.
Excellent. Now over on the right hand side, you can see we do get this nice little transition between each of the seconds. Notice that when I do use the key and I'm transitioning between two elements, not just a single element in and out like with VF, but with two elements, I do have to make up for the fact that they will both exist at one time. So down here, I've created a position of relative on the wrapper div that wraps the span here.
And I've positioned the seconds. Absolutely. So notice if I comment this out, you'll see what the behavior looks like and why we should account for this. Yeah, see in the browser now, they kind of click one of the other.
That's because one exists at the same time as the other one. And so, yeah, it doesn't look that great. That's just something to note. when you use the key in order to trigger transitions.
Typically, that's just going to mean positioning something. Absolutely. Another instance where you can use transitions is when you're switching out the value of a dynamic component. Let me show you what that looks like.
view, I've imported a dinner component, and then I'm using it on the page. That dinner component looks something like this. I'm importing a spaghetti component. and a dumpling component.
Each of those components just includes embedded GIFs of the proper food. Then I'm creating a variable here called I want Italian. It's going to start out as true. And then we'll create a computed variable called food to eat.
And when I want Italian is true, then we want to show the spaghetti component. Otherwise, we're going to show the dumplings component. Then down inside the template, I'm using the transition component. to wrap the dynamic component here, and I've provided an input where we can toggle the value of i1 Italian.
Of course, at the bottom, we've also provided the proper classes in order to make the transition work. Now, over on the right-hand side, since we have the transition wrapping the component here, the dynamic component, then it should fade in and out between the two different GIFs. Let's see if it works. So, I want Italian, shows the spaghetti eating girl here.
When I uncheck it, sure enough, we get the dumplings. Very cool. Now, it did transition. However, you saw there was still that kind of jump there, right?
This is the exact same issue we ran into when using the key, that both of them existed in the DOM at the same time. In order to remedy this, we could do the exact same thing by positioning the elements absolutely. but I wanted to show you one more solution to this problem and that is providing the mode prop on the transition. The mode that I want to use now is called out in.
This tells view that I want to apply the transition completely in and then completely out again on an element before applying the transition to the new element. Let's give the page a refresh and see what it looks like this time. Notice the first element transitions completely out. and only after that is the new element added on the page.
So there you have it. Now you know all the ways in which you could use the transition component.