This is the 24th day of my participation in the August More Text Challenge

How do you render an entire list at the same time, for example with V-for, after working with transitions from single elements to rendering one of multiple nodes at a time in the previous chapters? VUE provides us with a
component.

transition-groupintroduce

  1. This component has the following features:

    • Different from the<transition>, it will be rendered as a real element: the default is one<span>. You can also passtagAttribute is replaced with another element.
    • Transition mode is not available because we no longer switch unique elements between each other.
    • Child elements are usually looped through using v-for
    • Child elements must have a unique key attribute, and the key cannot be an index value.
    • CSS transitions are applied to child elements, not to the container itself.

  2. Syntax for this component:

    • appear: Used to specify whether render animations should be used during appearance
    • tag: used to specifytransition-groupTag Render default tag, not specified,transition-groupThe default is rendered asspan
    • transition-groupThe contents of the package must be specifiedkey

List entry/exit transitions

As a simple example of the transition into and out of the CSS, the effect remains the same as before.

// HTML <div id="app"> <button type="button" @click="handleAdd"> @click="handleSplice"> </button> <transition group> <li v-for="(item, index) of list" :key="index">{{item.title}}</li> </transition-group> </div> // JS handleAdd: function() { var index = 0 this.list.push({ id: ++index, title: 'Hello World' }) }, handleSplice: function() { this.list.splice(this.list.length-1, 1) } //CSS .v-enter,.v-leave-to { opacity: 0; } .v-enter-active,.v-leave-active { transition: opacity 1s; }Copy the code

Using transition-group is equivalent to adding a transition to each child element.

The sorting transition and interleaving transition of lists can be studied and referenced.