Vue 过渡动画

进入(v-enter)/离开(v-leave)/移动(v-move)&列表(transition-group)的过渡

简单的例子：

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

new Vue({
  el: '#demo',
  data: { show: true }
})

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

1. 使用 <transition> 标签包裹需要过渡动画的元素，vue会在适当时候给元素添加类名。

2. 被 <transition> 标签包裹的元素需要使用条件渲染("v-if"/"v-show")。

3. 在 <transition> 标签内的 "name" 属性为动画提供具名，也可能缺省，则以 "v-" 作为前缀。

4. 以上配置并不会在首次渲染生效，使用 "appear" 属性解决，具体查看下面的 "初始渲染的过渡" 。

注意，若 "v-if"/"v-show" 放在组件内部，只会产生"进入过度"。解决办法是把 "v-if"/"v-show" 放在父组件中。错误示范如下：

<div id="container">
  <button @click="isShow=!isShow">显示/隐藏</button>
  <transition>
    <child/>
    <!-- <child v-if="isShow"> -->  <!-- 正确做法 -->
  </transition>
</div>
<script>
Vue.component('child',{
  template: '<div v-if="$root.isShow" style="background:green;width:100px;height:100px;">子组件</div>'
});
new Vue({
  el: '#container',
  data() { return { isShow: false } }
});
</script>
<style>
  .v-enter-active, .v-leave-active { transition: opacity .5s; }
  .v-enter, .v-leave-to { opacity: 0; }
</style>

 

---

初始渲染的过渡：

<!-- 添加 appear 属性后可在首次渲染有 enter 过渡动画 -->
<transition appear><!-- ... --></transition>
<!-- 同样可以指定自定义类名及JS钩子函数，具体做法查看官方文档 -->

---

过渡的类名( 6个 )：