同時使用過渡和動畫

點擊打開視頻講解更加詳細

Vue 為了知道過渡的完成，必須設置相應的事件監聽器。它可以是 transitionend 或 animationend，這取決於給元素應用的 CSS 規則。如果你使用其中任何一種，Vue 能自動識別類型並設置監聽。

但是，在一些場景中，你需要給同一個元素同時設置兩種過渡動效，比如 animation 很快的被觸發並完成了，而 transition 效果還沒結束。在這種情況中，你就需要使用 type attribute 並設置 animation 或 transition 來明確聲明你需要 Vue 監聽的類型。

完整案例：

<template>
  <div id="app">
    <div id="example-3">
      <button @click="show = !show">
        Toggle render
      </button>

      <!-- 同時使用過渡和動畫 -->

      <!-- 第一個animated是必須添加的樣式名，第二個是指定的動畫樣式名。如果動畫是無限播放的，可以添加 第三個class infinite。 -->
      <!-- animate.css這個動畫效果，點擊查看animate.css庫，可以看到持續時間只有1s，但是過渡的效果在文中我定義了3s。那麼整個過程是1s還是3s? -->
      
      <!-- 使用 type attribute 並設置 animation 或 transition 來明確聲明你需要 Vue 監聽的類型 -->
      <transition
        type="animation"
        name="fade"
        enter-active-class="animate__animated animate__swing fade-enter-active"
        leave-active-class="animate__animated animate__shake fade-leave-active"
      >
        <p v-if="show">hello</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      show: true
    } 
  },
  mounted() {
    
  },
  components:{
    
  },
  methods:{
    
  }
}
</script>

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

若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！