From the course: Vue.js 2 Essential Training

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Creating transitions and animations

Creating transitions and animations

From the course: Vue.js 2 Essential Training

Start my 1-month free trial

Creating transitions and animations

“

- [Instructor] Vue.js gives you a great way of animating objects and it's called transitions. So let's take a look at how they work. And what we want to do is animate the appearance and disappearance of this element that we created a toggler for earlier. So let's go ahead and hide this navigation. And we're going to focus on this section right here. So to create an animation or a transition we have to use a transition tag here. And we'll need to close it out where we want the animation to stop. And then we'll have to give it a name as well. So I'm going to call this one fade. And in addition to that we have to provide a sort of toggling function. So we'll create another div here. And this div is going to have a v if statement that tracks the value of a variable called sliderStatus. So if you remember we created that variable earlier and what it does is show or hide this thing if the value of this variable is true or false. So we need to go ahead and finish up the code here. And close…

Contents