Vue中的Transition组件——透彻解析，告别迷糊！

2023-11-02 17:50:27







**Vue中的Transition组件——透彻解析，告别迷糊！** 

## 什么是Transition组件？

Transition组件是Vue内置组件，用于实现组件过渡效果。在Vue中，过渡效果是通过CSS来实现的，所以过渡不是如何使用组件，而是如何写CSS。

## Transition组件的基本用法

Transition组件的用法很简单，只需要在组件上添加transition属性，然后在CSS中定义过渡效果即可。

```html
<transition name="fade">
  <div v-if="show">显示的内容</div>
</transition>

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s ease-in-out;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}

这段代码中，我们在组件上添加了name属性，并在CSS中定义了两个过渡类名，分别是.fade-enter-active和.fade-leave-active。这两个类名分别用于控制组件进入和离开时的过渡效果。

Transition组件的进阶用法

Transition组件除了基本用法之外，还有许多进阶用法。比如，我们可以使用CSS动画来实现更复杂的过渡效果。

<transition name="scale">
  <div v-if="show">显示的内容</div>
</transition>

.scale-enter-active {
  animation: scale-in .5s ease-in-out;
}
.scale-leave-active {
  animation: scale-out .5s ease-in-out;
}

@keyframes scale-in {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scale-out {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}