Vue uses the Transition tag or transition-group tag to help us implement some simple animation effects into the global component for easy use

1. <Transition>The label

An abstract component that applies only to a single element. It has two attributes name Mode

Name can be interpreted as the name (identifier) of the class animation.

Mode can be understood as the animation transition mode provided by VUE

  • In-out: The new element transitions first, and then the current element transitions away.
  • Out-in: The current element transitions first, and then the new element transitions in.
<Transition name='fade-right' mode=' out-of-in '> v-if='info.sub'>{{info.sub.name}} </XtxBreadItem> </Transition>Copy the code
Of course, it’s important to define animation effects in a public way
.fade-leave {
    opacity: 1
}
.fade-leave-active {
    transition: all 1s;
}
.fade-leave-to {
    opcaity: 0
}
Copy the code

2. transition-groupThe label

The list transition is implemented, and it renders a real element node.

When implementing list transitions, if the elements to be transitioned are rendered by V-for, you cannot wrap them with transition. Instead, you need to use transition-group

If you want to animate elements created for the V-for loop, you must set the :key property for each element

His attribute tag name Appear

Tag means what element is wrapped around and the default is span

The name of animation

The “Appear” page shows you what it looks like when you enter

<transition-group tag="div" name="flip-list" appear>
    <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
     {{ item.name }}
    </li>
</transition-group>
Copy the code