Vue过渡与动画总结

Vue过渡和动画的要点就是在恰当的时机添加或删除 CSS 类名，我们需要定义其在不同的时间段的状态，在进入或离开的过程中，会有 6 个 class 切换：

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

v-enter-to：在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

v-leave-to：在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

1. 使用transition

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

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

.xxx-enter-active, .xxx-leave-active {
  transition: opacity .5s;
}
.xxx-enter, .xxx-leave-to {
  opacity: 0;
}

2.使用@keyframes配合animation

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

new Vue({
  el: '#example-2',
  data: {
    show: true
  }
})

.xxx-enter-active {
  animation: 动画名 .5s;
}
.xxx-leave-active {
  animation: 动画名 .5s reverse;
}
@keyframes 动画名 {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

3.JS钩子

在元素或组件上声明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.多元素过渡 + 过渡模式

当有相同标签名的元素切换时，需要通过设置 key 的唯一值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

<div id="demo">
  <transition name="xxx">
    <button key="on" v-if="status === 'on' " @click="status = 'off' ">on</button>
    <button key="off" v-else @click="status = 'on' ">off</button>
  </transition>
</div>

new Vue({
  el: '#demo',
  data: {
    status: 'on'
  }
})

.xxx-enter-active, .xxx-leave-active {
  transition: all 1s;
}
.xxx-enter {
  opacity: 0;
  transform: translateX(100px);
}
.xxx-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}

此时虽然可以做到一个出去另一个进来，但是有一个很明显的问题就是前面的按钮还占着位置后面的按钮就进来了，然后前者结束动画完全出去，后者才能完成站到前者的位置，这是两者动画重叠导致的，可以使用过度模式解决这个问题：

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

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

<transition name="fade" mode="out-in">
  <!-- ... the buttons ... -->
</transition>

可以看见加上过渡模式，很容易实现轮播效果。
5.多组件的过渡

不需要设置key因为组件都是唯一的。只需要使用动态组件：

<div id="demo">
  <button @click="view = 'v-a' ">A</button>
  <button @click="view = 'v-b' ">B</button>
  <transition name="component-fade" mode="out-in">
    <component :is="view"></component>
  </transition>
</div>

new Vue({
  el: '#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
{
  opacity: 0;
}

6.列表过渡

使用 组件，不同于 ，它会以一个真实元素呈现：默认为一个 。也可以通过 tag 更换为其他元素。需要提供唯一key值，不可使用过渡模式因为不需要相互切换特有的元素。

<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 {
  opacity: 0;
  transform: translateY(30px);
}