vue動效基本使用方法

單元素/組件的過渡

Vue 提供了 transition 的封裝組件，在條件渲染 (使用 v-if)，條件展現 (使用 v-show)等狀況下能夠給任何元素和組件添加進入/離開過渡

<template lang="pug">
  .wrap.
      transition(name="fade")
        item-picker(
          v-if="showDuration"
          title="持續天數"
          :columns="duration"
          @cancel="cancel"
          @confirm="confirm"
        )

</template>

<style scoped lang="less">
    .fade-enter-active, .fade-leave-active {
      transition: opacity .3s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
</style>

• v-enter-active：定義進入過渡生效時的狀態。在整個進入過渡的階段中應用，在元素被插入以前生效，在過渡/動畫完成以後移除。這個類能夠被用來定義進入過渡的過程時間，延遲和曲線函數。
• v-leave-active：定義離開過渡生效時的狀態。在整個離開過渡的階段中應用，在離開過渡被觸發時馬上生效，在過渡/動畫完成以後移除。這個類能夠被用來定義離開過渡的過程時間，延遲和曲線函數。
• v-enter：定義進入過渡的開始狀態。在元素被插入以前生效，在元素被插入以後的下一幀移除。
• v-leave-to: 2.1.8版及以上 定義離開過渡的結束狀態。在離開過渡被觸發以後下一幀生效 (與此同時 v-leave 被刪除)，在過渡/動畫完成以後移除。

CSS 動畫

CSS 動畫用法同 CSS 過渡

<transition name="bounce">
    <p v-if="show">Lorem ipsum dolor sit amet.</p>
</transition>

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