Vue

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

发表评论