vue2.0 transition组件实现过渡效果

切换
 

   

        i am the box
   

 

过渡原理分析

  Vue提供的组件叫transition，



  Vue提供的 组件，会在下列四种情况下起作用：


      ⑴. 条件渲染（使用v-if）


    ⑵. 条件展示（使用了v-show）


    ⑶. 动态组件


    ⑷. 组件根节点


在上述的任意一种情况发生的时候（比如：v-show的值为true切换成false的时候），我们可以给 组件包含的节点元素添加entering/leaving过渡动画效果



当一个被 组件包含的节点出现了以上的4种情况的任意一种的时候，
Vue自动嗅探目标元素是否应用了 CSS 过渡或动画，


如果是，在恰当的时机添加/删除 CSS 类名。


所谓的：“在恰当的时机添加/删除 CSS 类名”，其实是：


1.v-enter：进入过渡效果（enter）刚刚开始那一刻。在元素被插入或者show的时候生效，在下一个帧就会立刻移除，一瞬间的事。


2.v-enter-active: 表示进入过渡（entering）的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。


3.v-leave: 离开过渡（leave）的开始那一刻。在离开过渡被触发时生效，在下一个帧移除，也是一瞬间的事。


4.v-leave-active：离开过渡（leaving）的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除。