如何使用Vue實現動畫效果

這篇文章將為大家詳細講解有關如何使用Vue實現動畫效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

官方的demo點擊顯示與消失

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

transition 使用

<transition name="fade">
  (元素，屬性、路由....)
</transition>

class定義

.fade-enter{ }進入過渡的開始狀態，元素被插入時生效，只應用一幀后立即刪除；(運動的初始狀態)

.fade-enter-active{ }進入過渡的結束狀態，元素被插入時就生效，在transition/animation完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。

.fade-leave{ }離開過渡的開始狀態，元素被刪除時觸發，只應用一幀后立即刪除；

.fade-leave-active{ }離開過渡的結束狀態，元素被刪除時生效，在transition/animation完成之后移除。這個類可以被用來定義過渡的過程時間，延遲和曲線函數。

自定義過度類名

• 默認的 .fade-enter變成 .fade-in-enter

• 默認的 .fade-enter-active變成 .fade-in-active

• 默認的 .fade-leave變成 .fade-out-enter

• 默認的 .fade-leave-active變成 .fade-out-active

<transition
  name="fade"
  enter-class="fade-in-enter"
  enter-active-class="fade-in-active"
  leave-class="fade-out-enter"
  leave-active-class="fade-out-active"
>
  <p v-show="show">hello</p>
</transition>

.fade-in-active,
.fade-out-active {
  transition: all 0.5s ease;
}
.fade-in-enter,
.fade-out-active {
  opacity: 0;
}

transition相關函數

<transition
  name="fade"
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
>
  <div v-show="show"></div>
</transition>
<script>
  export default {
    methods: {
      beforeEnter(el) {
        console.log("動畫enter之前");
      },
      enter(el) {
        console.log("動畫enter進入");
      },
      afterEnter(el) {
        console.log("動畫進入之后");
        el.style.background = "blue";
      },
      beforeLeave(el) {
        console.log("動畫leave之前");
      },
      leave(el) {
        console.log("動畫leave");
      },
      afterLeave(el) {
        console.log("動畫leave之后");
        el.style.background = "red";
      },
    },
  };
</script>

transition結合animate.css使用

以下代碼演示元素以 X 軸為基線，翻轉進場出場的動畫Animate.css 庫點這里地址：https://animate.style/

<!-- 翻轉進場出場-->
<transition enter-active-class="flipInX" leave-active-class="flipOutX">
  <div v-show="show" class="animated"></div>
</transition>
<!-- 或者 -->
<transition
  enter-active-class="animated flipInX"
  leave-active-class="animated flipOutX"
>
  <div v-show="show"></div>
</transition>

列表過渡

<transition-group enter-active-class="flipInX" leave-active-class="flipOutX">
  <div v-show="show" :key="x" v-for="x in 5"></div>
</transition-group>

需要注意的是在group的時候，key的取值直接影響動畫的過渡。

關于“如何使用Vue實現動畫效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。