vue动画内置组件

---

vue动画的官方类名

如下来自vue官方文档，提供了dom元素，插入Enter和删除Leave的类名

Enter

1. v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
2. v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
3. v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。

Leave

1. v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
2. v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
3. v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

Transition组件

注意事项

1. transition组件仅允许一个根节点
2. 未自定义name的组件应用v-leave-from,自定义后v替换为name

<transition name="my">
</transition>
对应选择器则为
.my-leave-from

触发

1. 由 v-if 所触发的切换
2. 由 v-show 所触发的切换
3. 由特殊元素 切换的动态组件
4. 改变特殊的 key 属性

本文仅涉及前俩种

实例

<template><div id="App"><button @click="flag=!flag">Change</button><transition><h3 v-if="flag">2222</h3></transition>
</div>
</template><script>export default {name: 'App',data(){return {flag:true}}
}
</script><style>.v-enter-from,.v-leave-to {transform: translateY(-300%);}.v-enter-active,.v-leave-active {transition: all 1s ease;}</style>

TransitionGroup组件

用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。选择类与Transition相同

注意事项

TransitionGroup的每一个子节点都要有一个唯一的key

触发机制

我们使用一个实例，来说明各类的添加与删除
实例为从【1，2，3】中删除2

1. t0触发删除时
   新增元素会为其添加v-enter-from / v-enter-active类
   但本例无
   删除元素添加.v-leave-from/.v-leave-active等类，离开的动画
   移动的元素加上.v-move

实例

<template><div id="App"><button @click="delArr">Change</button><TransitionGroup tag="ul"><li v-for="item in Arr" :key="item">{{ item }}</li></TransitionGroup>
</div>
</template><script>export default {name: 'App',data(){return {Arr:[1,2,3,4,5,6,7,8,9,10]}},methods:{delArr(){let del =Math.floor((Math.random()*this.Arr.length))this.Arr=this.Arr.filter((item,index)=>{return index!==del})}}
}
</script><style>.v-enter-from,.v-leave-to {transform: translateY(-300%);}.v-enter-active,.v-leave-active {transition: all 1s ease;}.v-move {transition: all 1s ease;}.v-leave-active {position: absolute;}</style>

拓展

添加apper属性与tag

待插图