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 相关文章推荐
JQuery扩展插件Validate 2通过参数设置验证规则
Sep 05 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
javascript面向对象包装类Class封装类库剖析
Jan 24 Javascript
今天是星期几的4种JS代码写法
Sep 17 Javascript
倒记时60刷新网页的js代码
Feb 18 Javascript
用jQuery实现可输入多选下拉组合框实例代码
Jan 18 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
ES6新特性八:async函数用法实例详解
Apr 21 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
详解webpack-dev-server 设置反向代理解决跨域问题
Apr 18 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 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
php实现的css文件背景图片下载器代码
2014/11/11 PHP
php四种定界符详解
2017/02/16 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
JavaScript 高效运行代码分析
2010/03/18 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
Grid得到选择行数据的方法总结
2011/01/17 Javascript
一个JS的日期格式化算法示例
2013/07/31 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
最简单纯JavaScript实现Tab标签页切换的方式(推荐)
2016/07/25 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
js+html制作简单验证码
2017/02/16 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
JS实现分页导航效果
2020/02/19 Javascript
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
JS实现超级好看的鼠标小尾巴特效
2020/12/01 Javascript
Django模板Templates使用方法详解
2019/07/19 Python
Python搭建Keras CNN模型破解网站验证码的实现
2020/04/07 Python
Python爬虫使用bs4方法实现数据解析
2020/08/25 Python
Python自动创建Excel并获取内容
2020/09/16 Python
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
C#面试常见问题
2013/02/25 面试题
新学期红领巾广播稿
2014/01/14 职场文书
企业宣传口号
2014/06/12 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
结婚保证书(三从四德)
2015/02/26 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
车位出租协议书范本
2016/03/19 职场文书
创业计划书之孕婴生活馆
2019/11/11 职场文书
导游词之阆中古城
2019/12/23 职场文书