十六、过渡&动画

进入/离开&列表过渡

vue在插入更新或移除DOM时，提供多种不同方式应用过渡效果。

• （1.）在css过渡和动画中自动应用class
• （2.）可以配合使用第三方css动画库，如Animate.css
• （3.）在过渡钩子函数中使用javascript直接操作DOM。
• （4.）可以配合使用第三方javascript动画库。如Velocity.js

（1.）单元素/组件过渡

vue提供transition的封装组件，可以给任何元素和组件添加进入/离开过渡

• 条件渲染（v-if）
• 条件展示（v-show）
• 动态组件
• 组件根节点
• 例：

 <style>
 	.fade-enter-active, .fade-leave-active {
            transition: opacity .5s;
        }
        .fade-enter, .fade-leave-to {
            opacity: 0;
        }
 </style>
 <div id="app">
    <button v-on:click="show =!show">Toggle</button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<script>
   var vm = new Vue({
       el:"#app",
       data: {
          show: true
          }
       })
</script>

过渡类名：在进入/离开的过渡中，有6个class切换。

• 1.v-enter：定义进入过渡的开始状态。在元素被插入前生效，在元素被插入之后的下一帧移除。
• 2.v-enter-active：定义进入过渡生效时的状态。在元素被插入前生效，在过渡/动画完成之后移除、这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
• 3.v-enter-to：定义进入过渡的结束状态。在元素被插入之后下一帧生效（与此同时v-enter被移除），在过渡/动画完成之后移除。
• 4.v-leave：定义离开过度的开始状态，在离开过渡被触发时立刻生效，下一帧被移除。
• 5.v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
• 6.v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
• 如果使用没有名字的<transition>，则v-是这些类名的默认前缀。如果使用了<transition name="my-transition">那么v-enter会替换为my-transition-enter。
• (2.)css过渡：常用过渡都是使用css过渡
• 例:

.slide-fade-enter-active {
  transition: all .3s ease;
}

• (3.)css动画：css动画用法同css过渡，区别是在动画中v-enter类名在节点插入DOM后不会立即删除，而是在animationend时间触发时删除。
• 例：

.bounce-enter-active {
  animation: bounce-in .5s;
}

（2）多个元素的过渡

多个组件过渡对原生标签可以使用v-if/v-else。当有相同标签名的元素切换时，需要通过key atrribute 设置唯一的值来标记以让vue区分它们。否则vue会为了效率只替换相同标签内部的内容。给在<transition>组件中多个元素设置key是更好地实践。

例：

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

• 也可以通过给同一个元素的key attribute 设置不同状态来代替v-if和v-else，例：

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

（1）过渡模式：vue提供的过渡模式：

• （1.1）in-out：新元素先进行过渡，完成后当前元素过渡离开。
• （1.2）out-in：当前元素先进行过渡，完成之后新元素过渡进入。

（3）多个组件的过渡

多个组件只需要只用动态组件，例;

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>
new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    },
    'v-b': {
      template: '<div>Component B</div>'
    }
  }
})
.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}

（4）列表过渡

使用 <transition-group> 组件。来渲染整个列表。例：

<div id="list-demo" class="demo">
  <button v-on:click="add">Add</button>
  <button v-on:click="remove">Remove</button>
  <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
</div>
new Vue({
  el: '#list-demo',
  data: {
    items: [1,2,3,4,5,6,7,8,9],
    nextNum: 10
  },
  methods: {
    randomIndex: function () {
      return Math.floor(Math.random() * this.items.length)
    },
    add: function () {
      this.items.splice(this.randomIndex(), 0, this.nextNum++)
    },
    remove: function () {
      this.items.splice(this.randomIndex(), 1)
    },
  }
})
.list-item {
  display: inline-block;
  margin-right: 10px;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
  opacity: 0;
  transform: translateY(30px);
}