Transitions and animations are a great way to add some visual interest to any website or application. In fact, they can even be a great way of teaching the user how to better interact with the interface, and overall just provide a better user experience. js? Well, there are several built-in solutions as well as some really great libraries that we can reach for.
In this course, we'll take a look at both. starting with the built-in transition component. Let's jump into some code. Here I have a menu that we can toggle by clicking a button.
And in the code, this is powered by a showMenuReactive variable that we toggle whenever we click the button here, and then we show the menu if showMenu is true. But as you might have noticed, when clicking the button, the menu shows and hides immediately. which can be a little bit harsh on the eyes. In Vue, we can make this nicer with the transition component.
js, and therefore you do not need to import it. It's globally available throughout your application. To use the transition component, you should wrap whatever element that you're conditionally showing or hiding with it. In our case, that is the UL.
Awesome. Back over in the browser, let me try things again. Hmm, still no transition. Well, that's because by itself the transition component doesn't do anything.
You have to tell it what the transition looks like with CSS. js transition component. In fact, this is how I start all of my own transitions in my projects. I come here, scroll down until I find the example CSS, and then copy it and paste it into my project.
This should go into a style tag. I'll paste this in, and we'll see how this has changed our app. This time when I hit show menu, sure enough, the menu starts out at zero opacity and then fades in smoothly. And then vice versa for hide menu.
In the next lesson, We'll learn what these classes are actually doing and learn how to wield them to make all sorts of common and unique transitions. Transitions and animations are a great way to add some visual interest to any website or application. In fact, they can even be a great way of teaching the user how to better interact with the interface, and overall just provide a better user experience. js?
Well, there are several built-in solutions as well as some really great libraries that we can reach for. In this course, we'll take a look at both. starting with the built-in transition component. Let's jump into some code.
Here I have a menu that we can toggle by clicking a button. And in the code, this is powered by a showMenuReactive variable that we toggle whenever we click the button here, and then we show the menu if showMenu is true. But as you might have noticed, when clicking the button, the menu shows and hides immediately. which can be a little bit harsh on the eyes.
In Vue, we can make this nicer with the transition component. js, and therefore you do not need to import it. It's globally available throughout your application. To use the transition component, you should wrap whatever element that you're conditionally showing or hiding with it.
In our case, that is the UL. Awesome. Back over in the browser, let me try things again. Hmm, still no transition.
Well, that's because by itself the transition component doesn't do anything. You have to tell it what the transition looks like with CSS. js transition component. In fact, this is how I start all of my own transitions in my projects.
I come here, scroll down until I find the example CSS, and then copy it and paste it into my project. This should go into a style tag. I'll paste this in, and we'll see how this has changed our app. This time when I hit show menu, sure enough, the menu starts out at zero opacity and then fades in smoothly.
And then vice versa for hide menu. In the next lesson, We'll learn what these classes are actually doing and learn how to wield them to make all sorts of common and unique transitions.