Vue -- 过渡和动画

单组件过渡和动画

• 动画方案：css过渡和动画中自动用class；配合css第三方库如 Animate.css；在钩子里面js操作dom；配合第三方js库如 Velocity.js。
• 单元素的过渡：可以用transition，有几种情况满足：v-if和v-show、根组件、动态组件。

// html
<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

// css
<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

• 当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：

1. 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2. 如果过渡组件提供了JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3. 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)。

• v-enter和v-leave过渡的开始状态，v-enter-to和v-leave-to是结束过渡时的状态。

  
  过渡类名
• 也可以在<transition>上使用enter-class、enter-active-class enter-to-class、leave-class、leave-active-class、leave-to-class属性作为类名，优先级高于name指向的class，可用于第三方库。
• 动画：

<div id="example-2">
  <button @click="show = !show">Toggle show</button>
  <transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  </transition>
</div>

<style>
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
</style>

js钩子

• 在<transition>上增加监听事件：

<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) {
    // el.style.opacity = 0
  },
  // 此回调函数是可选项的设置，与 CSS 结合时使用
  enter: function (el, done) { done() },
  afterEnter: function (el) {},
  enterCancelled: function (el) {},

  beforeLeave: function (el) {},
  // 此回调函数是可选项的设置，与 CSS 结合时使用
  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 的影响。

初始渲染

• 初始渲染也有css和js钩子，把上面的enter和leave换成appear就可以了。

多组件的过渡和动画

• 原生标签可以通过v-if和v-else来指定，但记得加上key，否则会重用。内容一致的时候还可以用key来简写代码。

<transition>
  <button v-if="isEditing" key="save">
    Save
  </button>
  <button v-else key="edit">
    Edit
  </button>
</transition>

// key写法
<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

• 对于多个原生组件，要注意一个组件的离开过渡和另一个组件的进入过渡是同时发生。可加上定位和translate让他们看起来像滑动过渡。或者可以通过mode属性指定先后顺序<transition name="fade" mode="out-in"></transition>（out-in和in-out两种）。
• 对于多个自定义组件，只需在<component>外嵌套一层<transition>即可。
• 对于列表，则与上面最终只有一个组件不同，需要用<transition-group name="list" tag="p"></transition>包裹。注意，内部的列表必须要用key；且<transition-gruop>会真实渲染可用tag指定最终渲染标签否则默认span；mode属性不可用；以及有v-move或者move-class，类似v-enter和enter-class用法但可以实现平滑过渡（注意使用该属性进行过渡的元素不能设置为display: inline。
• 过渡也可以复用，只需将<transition>或<transition-gruop>作为根组件即可。
• 动态过渡是通过绑定name属性来实现css的动态切换来达到过渡的动态切换。