Vue中transition和animation如何结合实现CSS过渡效果？

本文共计2141个文字，预计阅读时间需要9分钟。

使用一个toggle按钮控制p元素的显示与隐藏。例如，如果不使用过渡效果，代码如下：

蓝色理想

以一个toggle按钮控制p元素显隐为例，如果不使用过渡效果，则如下所示

<div id="demo"> <button v-on:click="show = !show">Toggle</button> <p v-if="show">蓝色理想</p> </div> <script> new Vue({ el: '#demo', data: { show: true } }) </script>

如果要为此加入过渡效果，则需要使用过渡组件transition 

过渡组件

Vue提供了transition的封装组件，下面代码中，该过渡组件的名称为'fade'

<transition name="fade"> <p v-if="show">蓝色理想</p> </transition>

当插入或删除包含在transition组件中的元素时，Vue会自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名 

过渡类名

总共有6个(CSS)类名在enter/leave的过渡中切换

v-enter

定义进入过渡的开始状态。