Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Transitions and Animations Chapter 13

Note that we also added a key to each list element according to the topic. The last thing we

need is adding the transition rules to our CSS:

.v-leave-active {

transition: all 1s;

opacity: 0;

transform: translateY(-30px);

}

Now, the subjects will disappear with the transition on clicking the Done button, as shown:

How it works...

The tag represents a container for a group of elements that will be

displayed at the same time. By default, it represents the tag, but by setting the tag

attribute to ul, we made it represent an unordered list.

Every element in the list must have a unique key or the transitions won't work. Vue will
take care of applying a transition to every element that enters or leaves.

Transitioning elements that move in a list

In this recipe, you will build a list of elements that move according to how the list changes.
This particular animation is useful when you want to tell your user that something has

changed and the list is now updated accordingly. It will also help the user identify the point
in which the element was inserted.