Vue中JS动画与Velocity.js的结合使用


Posted in Javascript onFebruary 13, 2019

前面学习了用css实现动画效果,那 Vue 中能不能用js实现动画效果呢?

其实 Vue 提供了很多动画钩子

enter

入场动画钩子函数有before-enter、enter、after-enter

before-enter

动画出现前的事件

<div id="root">
  <transition name="fade"
    @before-enter="handleBeforeEnter"    //动画出现前的事件
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">切换</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleClick(){
      this.show = !this.show
    },
    handleBeforeEnter(el){     //接收一个参数 el,为 dom 元素
      el.style.color = 'red'
    }
  }
})

enter

before-enter事件结束后执行

<div id="root">
  <transition name="fade"
    @before-enter="handleBeforeEnter"
    @enter="handleEnter"    //before-enter 事件结束后执行
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">切换</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show:true
  },
  methods: {
    handleClick(){
      this.show = !this.show
    },
    handleBeforeEnter(el){
      el.style.color = 'red'
    }
    handleEnter(el,done){      //接收两个参数,第一个参数 el 为 dom 元素,第二个参数是 done 是个回调函数
      setTimeout(()=>{
        el.style.color = 'green'
        done()         //done 回调函数非常重要,在执行完动画后需手动执行下这个函数,相当于告诉 Vue 这个动画已经执行完了,会再去调用 after-enter 事件
      },2000)
    }
  }
})

after-enter

enter事件中done被调用后,after-enter事件会被触发

<div id="root">
  <transition name="fade"
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter"   //enter 事件中 done 被调用后,after-enter 事件会被触发
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">切换</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleClick() {
      this.show = !this.show
    },
    handleBeforeEnter(el) {
      el.style.color = 'red'
    },
    handleEnter(el, done) {
      setTimeout(() => {
        el.style.color = 'green'
        done()
      }, 2000)
    },
    handleAfterEnter(el) {   //接收一个参数 el,为 dom 元素
      setTimeout(()=>{
        el.style.color = 'blue'
      },2000)
    }
  }
})

leave

与入场动画对应的出场动画钩子函数有before-leave、leave、after-leave。它们的用法与入场动画用法一样

Velocity.js库

有了上面基础后,配合Velocity.js库,能实现更强大的动画效果。

<div id="root">
  <transition name="fade"
        @before-enter="handleBeforeEnter"
        @enter="handleEnter"
        @after-enter="handleAfterEnter"   //enter 事件中 done 被调用后,after-enter 事件会被触发
  >
    <div v-if="show">hello world</div>
  </transition>
  <button @click="handleClick">切换</button>
</div>
let vm = new Vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleClick() {
      this.show = !this.show
    },
    handleBeforeEnter(el) {
      el.style.opacity = 0
    },
    handleEnter(el, done) {
      Velocity(el, {     //第一个参数是要操作的 dom 元素
        opacity: 1
      }, {
        duration: 1000,   //第三参数中需要配置一个 complete 属性,值为 done,因为 Velocity 执行完后会自动执行 complete 属性,这里设置为 done 是让它去触发 after-enter 事件
        complete: done
      })
    },
    handleAfterEnter(el) {
      console.log('动画结束')
    }
  }
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 获取图片颜色
Apr 05 Javascript
node.js中的querystring.stringify方法使用说明
Dec 10 Javascript
Javascript实现的SHA-256加密算法完整实例
Feb 02 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
js控件Kindeditor实现图片自动上传功能
Jul 20 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
Bootstrap模态框插入视频的实现代码
Jun 25 Javascript
微信小程序左滑动显示菜单功能的实现
Jun 14 Javascript
微信小程序引入Vant组件库过程解析
Aug 06 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
JavaScript中.min.js和.js文件的区别讲解
Feb 13 #Javascript
node.js微信小程序配置消息推送的实现
Feb 13 #Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 #Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 #jQuery
vuex实现的简单购物车功能示例
Feb 13 #Javascript
jquery无缝图片轮播组件封装
Nov 25 #jQuery
Vue中多个元素、组件的过渡及列表过渡的方法示例
Feb 13 #Javascript
You might like
spl_autoload_register与autoload的区别详解
2013/06/03 PHP
PHP中文字符串截断无乱码解决方法
2016/10/10 PHP
PHP实现的只保留字符串首尾字符功能示例【隐藏部分字符串】
2019/03/11 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
写出更好的JavaScript程序之undefined篇(中)
2009/11/23 Javascript
javascript 快速排序函数代码
2012/05/30 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
深入浅析JavaScript面向对象和原型函数
2016/02/06 Javascript
js中遍历Map对象的方法
2016/07/27 Javascript
使用jquery给新生的th绑定hover事件的实例
2017/02/10 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
nodejs socket实现的服务端和客户端功能示例
2017/06/02 NodeJs
详解vue-router和vue-cli以及组件之间的传值
2017/07/04 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
validform表单验证的实现方法
2019/03/08 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
Python显示进度条的方法
2014/09/20 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
Python pandas实现excel工作表合并功能详解
2019/08/29 Python
python接入支付宝的实例操作
2020/07/20 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
工商管理专业实习生自我鉴定
2013/09/29 职场文书
培训讲师邀请函
2014/01/10 职场文书
大学同学十年聚会感言
2014/02/21 职场文书
小学数学课后反思
2014/04/23 职场文书
求职信名称怎么写
2014/05/26 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
2014年技术员工作总结
2014/11/18 职场文书
党员转正申请报告
2015/05/15 职场文书
JS封装cavans多种滤镜组件
2022/02/15 Javascript
Redis 报错 error:NOAUTH Authentication required
2022/05/15 Redis
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL