VUE3之Animation（一）基本使用

transition的基本使用

对要使用动画的单个组件使用transition标签包裹，并为transition标签定义一个name：

      <transition name="sk">
        <h2 v-if="isShow">hello world</h2>
      </transition>

根据name的名称去style中定义样式，以name-为开头的一系列class：

<style scoped>
  .sk-enter-from,
  .sk-leave-to{
    opacity: 0;
  }

  .sk-enter-to,
  .sk-leave-from{
    opacity: 1;
  }

  .sk-enter-active,
  .sk-leave-active{
    transition: opacity 2s ease;
  }
</style>

如果在transition中不指定name，以上的class都以v-开头，如v-enter-from