vue内置组件-transtion

1、动画过渡

关于动画部分，通常是css3的transtion、transform和animation，这部分能够参考w3school上的内容。

2、vue的内置组件

vue的内置组件一共有五个（截至到目前vue2.x），这里主要介绍的是过渡组件<transition>和<transition-group>（官方文档）。

一、经常使用情形

• 条件渲染 v-if
• 条件显示 v-show
• 动态组件 <component :is="xxx">
• 组件根节点

二、<transition>的渲染

<transition name="fade">
    <p v-if="show">test</p>
</transtion>

new Vue({
   el:"#demo",
   data(){
        return{
            show: true;
        }
    } 
}) 

.fade-enter-active, .fade-leave-active{
  transition: all 1s ease-in-out;  
}

.fade-enter, .fade-leave-to{
  opacity: 0;  
}

三、<transition>的标签属性、事件

四、<transition-group>

<transition>可用于渲染v-if，v-show，v-if/v-else的元素，可是渲染v-if/v-else时若是是同名标签（如都是<div>）也须要指明key值

<transition-group>用于渲染v-for的元素，如整个列表的渲染，可是渲染时每一个子节点都应该有本身的key值

3、钩子函数

<transition>和<transition-group>都有本身的事件属性，可使用v-on指令指定对应的js函数

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。不然，它们将被同步调用，过渡会当即完成。

对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也能够避免过渡过程当中 CSS 的影响。

 4、过渡模式

在vue的transition组件中，离开和进入是同时发生的，这意味着两个元素会同时存在一段时间，若是想避免这种状况，可使用过渡模式<transition mode='in-out'>来渲染，过渡模式有如下两种：

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

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