AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2022-09-26 269
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 【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标签的单元素过渡和动画效果就讲解完毕了。希望大家可以多多尝试！！！

文章标签：
JavaScript
前端开发
关键词：
动画VUE.js
vue动画VUE.js
vue3 vue VUE.js
VUE.js动画
vue3动画VUE.js
蜡笔小心_
目录
相关文章
我是快乐的嘟嘟
|
7天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
75 26
html的七十二变
|
8天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
22 7
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
17 3
游客ady5kpv352g3u
|
7天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
14 2
我是快乐的嘟嘟
|
21天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具，正确配置和运行预渲染操作，结合其他 SEO 策略，可以实现更好的搜索引擎优化效果。同时，需要不断地监控和优化预渲染效果，以适应不断变化的搜索引擎环境和用户需求。
我是快乐的嘟嘟
119 63
html的七十二变
|
8天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
27 8
html的七十二变
|
8天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
25 5
html的七十二变
|
9天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
26 5
html的七十二变
|
9天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
20 4
游客zi3qmblbcdexu
|
14天前
|
JavaScript
Vue基础知识总结 4：vue组件化开发
Vue基础知识总结 4：vue组件化开发
游客zi3qmblbcdexu
36 6

热门文章

最新文章

  • 1
    Vue 入门之项目目录结构介绍
  • 2
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 3
    自己设计的Vue3的实用项目（内含对项目亮点的实现思路与介绍）（上）
  • 4
    新建Vue项目
  • 5
    vue之webpack打包原理和用法详解
  • 6
    基于vue的cron表达式组件——vue-crontab插件
  • 7
    使用webstorm来创建并且运行vue项目详细教程
  • 8
    Vue.js深度解析：前端开发的生产力引擎
  • 9
    在VUE项目中做一个简单的Axios二次封装及使用
  • 10
    重读vue电商网站6之如何重置表单
  • 1
    vue(1)，小白看完都会了
    43
  • 2
    深入理解Vue.js中的nextTick：实现异步更新的奥秘
    147
  • 3
    Vue中避免滥用this去读取data中数据
    43
  • 4
    vue3服务端渲染警告解决----DefinePlugin
    120
  • 5
    vue中使用pinia及持久化
    60
  • 6
    Vue3与Vue2：对比分析与迁移指南
    394
  • 7
    双向数据绑定：Vue.js的魔法背后
    56
  • 8
    Vue class和style绑定：动态美化你的组件
    82
  • 9
    Vue 监听器：让你的应用实时响应变化
    199
  • 10
    vue3封装面包屑
    146

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • jQuery开发教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • CSS基础教程
    • 下一篇
    阿里云OSS设置跨域访问