【Vue3从零开始-第四章】4-3 vue的动画标签transition（下）

2022-09-26 206

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue3从零开始-第四章】4-3 vue的动画标签transition（下）

]UWOD(KIB9LJS9~S[T{QHM9.png

前言

在上一篇的文章中，我们了解了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

$_O$YMQ{)BSSY))KZT7SQ}$O.png$

这时候定义的动画和过渡时长都是 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;
}

$$5X4W08{9V(_1RK{H20S]XU.png$

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

属性type

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

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

E{H{QMW$KDZN{G%S@Z}40PT.png

添加了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>
`
复制代码

8Y5(Y}ZP}7P2N]T06VZ0@XP.png

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 秒。

CDJS{Y5`~P[4KL}04()8K4S.png

钩子函数

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动画执行结束之后

T65C1UQC8QC91E4)FNI8YQW.png

在浏览器中开始执行动画效果之后，发现好像并没有执行结束动画的效果，这是因为在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函数

~(FRIP7[LO4(3%)VSUTZF$J.png

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

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

setTimeout(() => {
  clearInterval(animate)
  done()
}, 3000)
复制代码

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

$_CK8{_}[S@]9RM5521U]NXK.png$

总结

本章节还是继续讲解了transition标签，对于多动画的效果、type属性、

duration属性、钩子函数进行了讲解。至此transition标签的单元素过渡和动画效果就讲解完毕了。希望大家可以多多尝试！！！

【Vue3从零开始-第四章】4-3 vue的动画标签transition（下）

前言

合并使用

属性type

属性duration

钩子函数

总结

热门文章

最新文章

相关课程

相关电子书

相关实验场景