Vue中使用 transition标签或transition-group标签

Vue中使用 transition标签或transition-group标签来帮助我们实现一些简单的动画效果 定义到全局组件中方便我们的使用

1. <Transition>标签

一个抽象组件，且只对单个元素生效。他有两个属性 name mode

name 可以理解为class动画的名字(标识)

mode 可以理解为vue提供的动画过渡模式

• in-out：新元素先进行过渡，完成之后当前元素过渡离开。
• out-in：当前元素先进行过渡，完成之后新元素过渡进入。

<Transition name='fade-right' mode='out-in'>
    // 这是面包屑的内容进行动画展示 将面包屑用Transition包起来 
    <XtxBreadItem :key='info.sub.id' v-if='info.sub'>{{info.sub.name}}     </XtxBreadItem>
</Transition>

当然,一定要在公共方式中定义好动画效果

.fade-leave {
    opacity: 1
}
.fade-leave-active {
    transition: all 1s;
}
.fade-leave-to {
    opcaity: 0
}

2. transition-group标签

实现了列表的过渡，并且它会渲染一个真实的元素节点。

在实现列表过渡时，如果需要过渡的元素是通过v-for渲染出来的，不能使用transition 包裹，需要使用 transition-group

若需要为 v-for 循环创建的元素设置动画，必须为每一个元素设置 :key 属性

他的属性 tag name appear

tag 表示用什么元素包裹 默认用span包裹

name 动画名

appear 页面刚展示出来时 入场的效果

<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>