Vue.js (Vue) offers a simple way to transition between elements on the page, allowing for either simple transitions between CSS properties or complex animations (or both!). In this example I’ll demonstrate the basics of Vue transitions by creating a menu-expand toggle button. You can see a demonstration in the preview animation above.
Installing Vue is as simple as linking to it via a CDN. You can read more about installation options and how to install in the post Intro to Vue.js
For this example I’ll be using Google’s Material Icon set, an open-source and robust library of 900+ scalable icons. Although I’ll be using Material icons, this example could quickly and easily be adapted to fit a wide variety of element types. Adding the icons is quite simple — we’ll just import them to our CSS:
Now that we have the icon set imported, we’ll implement both icons that will represent our two states, expanded and collapsed. We’ll later control the visibility of these elements with Vue. I’ll add another class,
expand, to enhance the styling of these icons and add a transition effect for hovering.
Now that we have our icons in place, we’ll implement Vue by wrapping our icons in a parent element and assigning it an
id that we can pass into Vue.
Next, we’ll instantiate Vue and pass in our parent element
id, in this case
icon. We know that we’ll be toggling between two states, so we’ll create a
show and set it to
CSS Transitions and Animations
Vue handles transitioning of rendered elements by automatically assigning and removing classes. By defining the styles in these classes, we can control the animation of these elements. For example, Vue will assign a transitioned element the following classes during the duration of a transition (
.fade is simply a user-defined name):
.fade-leave-to will be the initial state of our icons, which will be set to transparent. Immediately after
.fade-enter is assigned, Vue will assign the class
.fade-enter-active, which will also handle the transitioning of the element opacity. Ultimately,
.fade-leave-to is assigned and the final state (transparent) is applied. What makes this setup extremely effective is that Vue is transitioning both elements with a single chain of actions.
Connecting to Vue
In order to transition our elements with Vue, we’ll need to wrap our icons in a
<transition> tag, which comes packaged with Vue. Items within the
<transition> will automatically be assigned the transition classes identified by the value passed into the
name attribute. In this case, we’re using the name
fade for our transitions. We’ll also add the attribute and value
mode="out-in" to ensure that the transition of one element finishes before the next begins.
Next, we’ll handle the toggling of the icon visibility and transitions by assigning a conditional directive to each icon,
v-else. Now, the expand icon will be visible if
show resolves to
true and the collapse icon will be visible if
show resolves to
On each icon, we’ll also attach a click event listener and toggle the visibility of the icon with
@click="show = !show". We could refactor our click event listeners into a method, but for the sake of simplicity we’ll just leave them in-line. Note that we need to assign each icon a unique
key value for Vue to hook into. In this case, we’ll manually assign these keys to
Have feedback? Let me know; I’d be happy to hear it. [email protected]