Velocity.js的使用

最新推荐文章于 2025-03-31 08:00:00 发布

HappyCodingTopOne

最新推荐文章于 2025-03-31 08:00:00 发布

阅读量534

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43852916/article/details/126453461

版权

本文介绍了如何使用Velocity.js库在Vue应用中创建流畅的序列动画，通过实例演示了如何为多个<div>元素设置宽度动画，并提供了多种资源链接以供深入学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

main.js中引入

import Velocity from 'velocity-animate'
Vue.prototype.Velocity = Velocity

实现序列动画

一般实现

   <div class="demoBox" ref="demoBox"></div>
    <div class="demoBox" ref="demoBox2"></div>
    <div class="demoBox" ref="demoBox3"></div>
    <button style="marginLeft:300px" @click="demoFunc">点我</button>

  demoFunc(){
      this.Velocity(this.$refs.demoBox,{width:'400px'},{duration:1000,complete:()=>{
           this.Velocity(this.$refs.demoBox2,{width:'400px'},{duration:1000,complete:()=>{
              this.Velocity(this.$refs.demoBox3,{width:'400px'},{duration:1000})
           }})
      }})
    },


.demoBox{
  width:100px;
  height:100px;
  background-color: pink;
}

序列动画

  demoFunc() {
      var seq = [
        {
          elements: this.$refs.demoBox,
          properties: { width: "400px" },
          options: { duration: 1000 }
        },
        {
          elements: this.$refs.demoBox2,
          properties: { width: "400px" },
          options: { duration: 1000 }
        },
        {
          elements: this.$refs.demoBox3,
          properties: { width: "400px" },
          options: { duration: 1000 }
        }
      ];
      this.Velocity.RunSequence(seq)
    }

其他信息

jianshu.com/p/d81a9f0f11ea
https://zhuanlan.zhihu.com/p/107840853
https://www.jsopy.com/2019/12/26/vuecha8/
http://velocityjs.org/#beginAndComplete
http://shouce.jb51.net/velocity/feature.html
https://www.imooc.com/video/9156