Vue animations

up:: Vue Animations can be added by using CSS Animations and adding those classes via Vue Dynamic Styles.

Enter-Leave States

When animating, eg. modals that approach can be tricky. When dismissing an overlay, it is removed from the DOM instantaneously (when using v-if or v-show). That means any animations can’t be applied anymore.

Vue fixes this by adding utility classes.

Element not mounted -> Element mounted
*-enter-from           *-leave-from
*-enter-to             *-leave-to
*-enter-active         *-leave-active

Example

Animating the appearing:

.v-enter-from {
	opacity: 0;
	transform: translateY(-30px);
}
 
.v-enter-active {
	transition: all 0.3s ease-out;
}
 
.v-enter-to {
	opacity: 1;
	transform: translateY(0);
}

Animating the exiting:

.v-leave-from {
	opacity: 0;
	transform: translateY(30px);
}
 
.v-leave-active {
	transition: all 0.3s ease-in;
}
 
.v-leave-to {
	opacity: 1;
	transform: translateY(0);
}

Custom names

On the HTML element, you can give a name:

<transition name="para">
	<p>Some text to animate</p>
</transition>

That gives it its own prefix:

.para-leave-to { … }

Transition element

Vue transition element