顯性的過渡持續時間

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

在很多情況下，Vue 可以自動得出過渡效果的完成時機。預設情況下，Vue 會等待其在過渡效果的根元素的第一個 transitionend 或 animationend 事件。然而也可以不這樣設定——比如，我們可以擁有一個精心編排的一系列過渡效果，其中一些嵌套的內部元素相比於過渡效果的根元素有延遲的或更長的過渡效果。

在這種情況下你可以用 組件上的 duration prop 定製一個顯性的過渡持續時間 (以毫秒計)：

<transition :duration="1000">...</transition>

你也可以定製進入和移出的持續時間：

<transition :duration="{ enter: 500, leave: 800 }">...</transition>

完整案例：

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

      <!-- 顯性的過渡持續時間 -->
      <!-- 用 <transition> 組件上的 duration prop 定製一個顯性的過渡持續時間 (以毫秒計)
      :duration="1000"
      :duration="{ enter: 500, leave: 800 }"定製進入和移出的持續時間 -->
      <transition
        :duration="10000"
        enter-active-class="animate__animated animate__swing"
        leave-active-class="animate__animated animate__shake"
      >
        <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>

</style>

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