vue之过渡或动画

介绍

vue简化了过渡和动画的使用，在以下环境中，可使用内置组件transition包裹加上指定class，以提供动画效果：

• 条件渲染v-if
• 条件显示v-show
• 动态组件

例子：过渡

<div id="demo">
  <button v-on: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;
}

生命周期

组件或元素有出现(Enter)和消失(Leave)两个过程，每个过程都有三个类来style这个过程，如下图所示：

可以看出，v-enter-active和v-leave-acitve作用于过渡或动画的整个过程，因此通常在此添加transition或animation样式。其他的class做作用于过程开始或结束的时候，用于添加不同时刻的样式。

在使用时，为了与某个transition组件联系起来，需要将上面类的v前缀替换为transition组件的name属性

例子：动画

<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>

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

.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);
  }
}

可以看出，一般动画只设置v-enter-active和v-leave-active就够了。

参考

Enter/Leave & List Transitions