VUE3之Animation（一）基本使用

transition的属性

transition动画和animation动画可以同时使用。当transition和animation的持续时间不一致时，type属性指定了动画的持续事件依据transition或animation的时间。

      <transition name="sk" type="transition">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>
// 或
      <transition name="sk" type="animation">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>

duration属性指明了整个动画的持续时间，并忽略style中定义的时间：

      <transition name="sk" :duration="1000">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>
// 或
      <transition name="sk" :duration=="{enter: 800, leave:1000}">
        <h2 class="title" v-if="isShow">hello world</h2>
      </transition>

mode属性用于transition中有多个元素的情况，mode有两个可取值：in-out是先执行进入动画、再执行退出动画；out-in是先执行退出动画、再执行进入动画。

      <transition name="sk" mode="out-in">
        <h2 class="title" v-if="isShow">hello world</h2>
        <h2 class="title" v-else>hello animation</h2>
      </transition>

在transition中显示组件需要用到动态组件<component>：

      <transition name="sk" mode="out-in">
        <component :is="isShow ? 'home':'about'"></component>
      </transition>

appear属性：如果需要第一次进入时也显示动画，需要将appear设置为true（默认是false）：

      <transition name="sk" mode="out-in" :appear="true">
        <component :is="isShow ? 'home':'about'"></component>
      </transition>