Vue過渡效果的實現

1、Vue 過渡組件

Vue 在插入、更新或者移除 DOM 時，使用內置的過渡封裝組件可以實現過渡效果

語法格式：

<transition name = "xx">
   <div></div>
</transition>

 

2、過渡的類名

在進入/離開的過渡中，會有 6 個 class 切換：

• v-enter：進入過渡的開始狀態

• v-enter-active：進入過渡生效時的狀態

• v-enter-to：進入過渡的結束狀態

• v-leave：離開過渡的開始狀態

• v-leave-active：離開過渡生效時的狀態

• v-leave-to：離開過渡的結束狀態

完整示例：

<template>
  <div>
    <div id="demo">
        <button v-on:click="show = !show">
          顯示/隱藏
        </button>

        <transition name="fades">
          <p v-if="show">hello</p>
        </transition>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>

<style> .fades-enter-active, .fades-leave-active {
      transition: opacity 1s
  }
  .fades-enter, .fades-leave-to {
      opacity: 0
  }
  .fades-leave, .fades-enter-to {
    opacity: 1
  }
</style>

 運行效果：