transition组件设置元素初始动画效果属性
一、transition组件
（1）如果某个元素或者组件需要使用过渡动画效果，只需使用vue提供的transition组件将其包裹起来封装成过渡组件。
（2）Vue 只有在插入，更新或者移除DOM元素时才会应用过渡效果，例如：
1、v-if（条件渲染）
2、v-show（条件展示）
3、动态组件
4、在组件的根节点上，并且被vue实例DOM方法触发。比如使用appendTo方法把组件添加到某个根节点上。
二、过渡效果实现方式
过渡效果具体的实现方式分为如下两种：
transition用法搭配（1）利用transition过渡或者动画来实现
（2）利用JavaScript钩子函数来实现
三、动画执行逻辑
封装成过渡组件的元素被插入或者删除时，vue将会做如下事情：首先查目标元素是否有transition过渡或者动画，如果有就在适当的时候进行处理。如果过渡组件设置了JavaScript钩子函数，vue会在相应阶段调用钩子函数。如果以上两者都没有，DOM操作（插入或者删除）就在下一帧立即执行。
四、结合transition实现动画效果
1、基本用法
（1）我们给transition的name属性设置一个值（name="xxx"），那么在组件过渡过程中，会有如下六个CSS类名进行切换：
xxx-enter：进入过渡的开始状态，元素被插入时生效，只应用一帧后立刻删除。
xxx-enter-active：进入过渡的结束状态，元素被插入时就生效，在过渡过程完成后移除。
xxx-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效(与此同时 xxx-enter 被移除)，在过渡/动画完成之后移除。
xxx-leave：离开过渡的开始状态，元素被删除时触发，只应用一帧后立刻删除。
xxx-leave-active：离开过渡的结束状态，元素被删除时生效，离开过渡完成后被删除。
xxx-leave-to：定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效(与此同时 xxx-leave 被删除)，在过渡/动画完成之后移除。
  （2）下面是一个简单的样例：通过点击按钮对下方图片进行显示或隐藏（交替）。在显示或隐藏的过程中，会有淡入淡出的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。