How it works...

The <transition-group> tag represents a container for a group of elements that will be displayed at the same time. By default, it represents the <span> 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.

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.