Vue3 过渡&动画

Transition过渡动画

<transition name="why">
  <h2 v-if="isShow">Hello World</h2>
</transition>

.why-enter-from,
.why-leave-to {
   
  opacity: 0;
}
.why-enter-to,
.why-leave-from {
   
  opacity: 1;
}
.why-enter-active,
.why-leave-active {
   
  transition: opacity 2s ease;
}

Transition组件的原理:

1. 自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名；

2. 如果 transition 组件提供了JavaScript钩子函数，这些钩子函数将在恰当的时机被调用；

3. 如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行；

animation动画

<transition name="why">
  <h2 v-if="isShow">Hello World</h2>
</transition>

.why-enter-active {
   
  animation