前言

transition也是Vue3提供的内置组件，可以让组件有进入或离开的过渡效果，以前是使用v-if和v-show来控制显隐，用起来比较生硬，Vue为了解决这种问题，提供了transition组件，可以利用name属性，自定义类名，来平滑的显示过渡效果，需要搭配CSS一起使用

transition name属性

name定义类名，也叫过度效果名，用定义的类名当做前缀，例如fade-enter-active,这个fade就是定义的类名

  <div class="content">
    <button @click="flag = !flag">动画过渡</button>
    <transition name="fade">
      <div v-if="flag" class="box"></div>
    </transition>
  </div>

CSS的transition

v是name定义的类名,可以使用6个Class进入/离开的过度效果

隐藏到显示的效果

• v-enter-form 进入动画的起始状态
• v-enter-active 开始的动画曲线
• v-enter-to 结束状态

.fade-enter-from {
  width: 0;
  height: 0;
}
.fade-enter-active {
  transition: all 1.5s ease;
}
.fade-enter-to {
  width: 200px;
  height: 200px;
}

显示到隐藏的效果

• v-leave-form 进入动画的起始状态
• v-leave-active 开始的动画曲线
• v-leave-to 结束状态

.fade-leave-from {
  width: 200px;
  height: 200px;
  transform: rotate(360deg);
}
.fade-leave-active {
  transition: all 3s ease;
}
.fade-leave-to {
  width: 0;
  height: 0;
}