065_末晨曦Vue技术_过渡 & 动画之初始渲染的过渡

初始渲染的过渡

点击打开视频讲解更加详细

可以通过 appear attribute 设置节点在初始渲染的过渡

<transition appear>
  <!-- ... -->
</transition>

这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
>
  <!-- ... -->
</transition>

自定义 JavaScript 钩子：

<transition
  appear
  v-on:before-appear="customBeforeAppearHook"
  v-on:appear="customAppearHook"
  v-on:after-appear="customAfterAppearHook"
  v-on:appear-cancelled="customAppearCancelledHook"
>
  <!-- ... -->
</transition>

在上面的例子中，无论是 appear attribute 还是 v-on:appear 钩子都会生成初始渲染过渡。

完整案例：

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

      <!-- 初始渲染的过渡 -->
      <!-- 通过 appear attribute 设置节点在初始渲染的过渡 -->
      <transition
        appear 
        enter-active-class="animate__animated animate__swing"
        leave-active-class="animate__animated animate__flash"
      >
        <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站一键三连哦！感谢支持！！！