这是我参与8月更文挑战的第11天，活动详情查看：8月更文挑战

这篇文章我们来讲一下内置组件transition和transition-group的使用方法，在使用它们的时候我们又该注意什么呢，下面让我们一探究竟把。

transition

transition是 Vue 提供的单元素/组件的过渡封装组件。如果有条件渲染 "v-if"、条件展示 "v-show"、动态组件和组件根节点任何一种情况，我们可以使用transition给任何元素和组件添加进入/离开过渡。

过渡class

过渡class共6个，其中 进入 enter 3个，离开 leave 3个，如下图所示：

from表示进入或离开的开始状态。
active表示进入或离开的过渡状态。在整个过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
to表示进入或离开的结束状态。

值得我们注意的是：

图中的v代表transition的name属性的值，例如name="slide-fade",对应 v-enter-from 要变成 slide-fade-enter-from
在Vue3中，enter-class 已经被重命名为 enter-from-class，leave-class 已经被重命名为 leave-from-class，这是与Vue2不同的地方。

如何使用

CSS过渡 transition

假设我们这样使用transition，如下：

<transition name="fade">
    <p v-show="show">world</p>
</transition>

那么，我们需要对应的css样式，如下：

//进入和离开的过渡状态
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s ease;
}

//进入的开始 离开的结束
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}

类比原生hover效果，enter相当于鼠标移入的效果，leave相当于鼠标移出的效果。

CSS动画

如果我们把上述的过渡改成动画该怎么做呢，如下：

//这里是加入 进入 和 离开 的动画
.fade-enter-active {
    animation: fade-in 0.5s;
}
.fade-leave-active {
    animation: bounce-in 0.5s reverse;
}

//这里就是我们平时写的 keyframes
@keyframes fade-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.25);
    }

    100% {
        transform: scale(1);
    }
}

自定义过渡class类名

当我们结合第三方动画库的时候，我们可以自定义过渡class类名，它们的优先级高于普通的类名，自定义类名的属性如下：

enter-from-class
enter-active-class
enter-to-class
leave-from-class
leave-active-class
leave-to-class

使用如下：

<transition name="bounce" 
        enter-active-class="animate__animated animate__tada"
        leave-active-class="animate__animated animate__bounceOutRight">
    <p v-show="show">world</p>
</transition>

显示的是自定义类名的效果，高于name属性的效果。

JavaScript 钩子

可以在 attribute 中声明 JavaScript 钩子，这样我们可以在对应的钩子里面操作el，钩子使用如下：

<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"
  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"  //仅 v-show
  :css="false"
>
  <!-- ... -->
</transition>

我们需要给它们对应的函数，如下：

methods: {
    //*****进入时*****
  beforeEnter(el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter(el, done) {
    // ...
    done()
  },
  afterEnter(el) {
    // ...
  },
  enterCancelled(el) {
    // ...
  },

  //***** 离开时 *****
  beforeLeave(el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave(el, done) {
    // ...
    done()
  },
  afterLeave(el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled(el) {
    // ...
  }
}

注意事项

CSS过渡和动画可以同时使用，你可以进入时用过渡，离开时用动画，根据自己的需求，选择合适的配合方式。
transition组件要合理的使用，有时原生的可能会更简单。

transition-group

transition-group是 Vue 提供的多元素/组件的过渡封装组件。默认情况下，它不会渲染一个 DOM 元素包裹器，但是可以通过 tag attribute 来定义。值得我们注意的是：每个 <transition-group> 的子节点必须有独立的 key，动画才能正常工作。

如何使用

当子节点被更新的时候，会触发动画。

使用

<transition-group tag="ul" name="fade">
    <li v-for="item in count" :key="item">
          {{ item }}
    </li>
</transition-group>

当count增加的时候，li也会增加，会触发动画。

JavaScript 钩子

同transition的钩子一样使用。

注意事项

一定要定义tag，如果未定义，则不会触发动画。
move-class - 覆盖移动过渡期间应用的 CSS 类。

总结

根据自己的需求，合理的使用transitio和transition-group。
使用它们的时候，要考虑到进入和离开的效果。当然，你可以只定义进入或离开的效果。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之组件篇（二）

transition

过渡class

如何使用

注意事项

transition-group

如何使用

注意事项

总结