一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

前言

在上一篇的文章中，我们了解了vue里面transition标签来实现单元素组件的过渡和动画效果，还知道了transition中的name属性和class属性的用法，本章节继续带着大家一起了解transition的更多用法。

合并使用

在上一章节中我们单独实现了过渡效果和动画效果，下面我们就来实现一个合并使用的效果。

<style>
    @keyframes shake {
      0% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-50px);
      }
      100% {
        transform: translateX(50px);
      }
    }
    .v-enter-from{
      color: green;
    }
    .v-enter-active{
      animation: shake 2s;
      transition: color 2s ease-in;
    }
    .v-leave-active{
      color: green;
      animation: shake 2s;
      transition: all 2s ease-in;
    }
</style>

• 入场动画中添加了一个颜色。

• 入场动画和出场动画执行过程中，animation为位移 2 秒，transition为 2 秒淡入效果

• 出场动画执行过程中，颜色还是为green

这时候定义的动画和过渡时长都是 2 秒，那如果其中一个效果时长改为 5 秒会怎样呢？

.v-enter-active{
  animation: shake 5s;
  transition: color 2s ease-in;
}
.v-leave-active{
  color: green;
  animation: shake 5s;
  transition: all 2s ease-in;
}

在浏览器中看到的过渡和动画效果就会不一致了。那么就得使用一个新的属性type

属性type

在transition标签上添加一个type属性，值可以设置为transition或animation，根据实际情况改变即可。

template: `
  <div>
    <transition type="transition">
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`

添加了type属性之后，会发现动画本来会延时到5秒的时候才会执行完，现在会跟随transition设置的2秒时长去同步执行完成。

属性duration

直接在style里面配置动画时间，或者是使用type属性配置同步执行，都是通过style里面的样式定义的时长去执行的整个动画效果，而且修改一个时长，还得额外修改其他的时长。

那如果我想直接定义一次动画时长，就要用到duration属性了。

template: `
  <div>
    <transition :duration="500">
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`

• duration属性值是动态的，所以需要用v-bind指令的形式去绑定。

• duration属性值表示的是执行动画时长，用毫秒计时。

• duration属性值会统一样式中的transition和animation的时长，而样式中定义的时长则会失效。

上面定义的duration是一个数字，他也可以是一个对象。

template: `
  <div>
    <transition :duration="{enter: 1000, leave: 3000}">
      <div v-if="show">Hello World</div>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
`

• 定义入场动画时长 1 秒，出厂动画时长 3 秒。

钩子函数

transition标签在上面的讲解中都是通过css样式去实现的动画效果，其实标签里面还有钩子函数通过JS的方法实现动画效果。

• 钩子函数类似于之前讲解过的vue生命周期函数，也是在某个时间点自动执行的函数。

<script>
  const app = Vue.createApp({
    data(){
      return {
        show: false
      }
    },
    methods: {
      handleClick(){
        this.show = !this.show
      },
      handleBeforeEnter(el){
        el.style.color = "red"
      },
      handleEnterActive(el, done){
        setInterval(() => {
          const color = el.style.color
          if(color === 'red'){
            el.style.color = "green"
          } else {
            el.style.color = "red"
          }
        }, 1000)
      },
      handleEnterEnd(el){
        el.style.color = "blue"
      }
    },
    template: `
      <div>
        <transition
          :css="false"
          @before-enter="handleBeforeEnter"
          @enter="handleEnterActive"
          @after-enter="handleEnterEnd">
          <div v-if="show">Hello World</div>
        </transition>
        <button @click="handleClick">切换</button>
      </div>
    `
  });

  const vm = app.mount('#root');

</script>

• transition标签中定义了一个属性css=false，表示css中的样式失效了，也就是不会执行了。

• transition标签中定义了三个钩子函数：before-enter、enter、after-enter

• before-enter表示初始化动画效果

• enter表示动画执行时

• after-enter动画执行结束之后

在浏览器中开始执行动画效果之后，发现好像并没有执行结束动画的效果，这是因为在enter函数中，没有将setInterval中的效果结束掉。

handleEnterActive(el, done){
    const animate = setInterval(() => {
      const color = el.style.color
      if(color === 'red'){
        el.style.color = "green"
      } else {
        el.style.color = "red"
      }
    }, 1000)
    setTimeout(() => {
      clearInterval(animate)
    }, 3000)
},

• 在enter函数中在定义一个setTimeout函数，3 秒之后关闭setInterval函数

这时候会发现，虽然将setInterval函数关闭了，动画效果也停止了，但是还是没有结束动画的效果。

那么就要使用到enter函数中的另一个参数done。

setTimeout(() => {
  clearInterval(animate)
  done()
}, 3000)

• 关闭setInterval函数的同时执行done函数，就是为了告诉transition标签中的after-enter函数，该执行结束动画了。

总结

本章节还是继续讲解了transition标签，对于多动画的效果、type属性、duration属性、钩子函数进行了讲解。至此transition标签的单元素过渡和动画效果就讲解完毕了。希望大家可以多多尝试！！！