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 相关文章推荐
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
Nov 30 Javascript
js jquery数组介绍
Jul 15 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
jquery实现动态操作select选中
Feb 11 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
jquery Easyui快速开发总结
Aug 20 Javascript
jquery实现的Accordion折叠面板效果代码
Sep 02 Javascript
vue.js语法及常用指令
Oct 29 Javascript
如何选择适合你的JavaScript框架
Nov 20 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
Aug 02 jQuery
JavaScript获取URL参数的方法分享
Apr 07 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
PHP开启gzip页面压缩实例代码
2010/03/11 PHP
php下关于中英数字混排的字符串分割问题
2010/04/06 PHP
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
浅析php header 跳转
2013/06/17 PHP
php解决抢购秒杀抽奖等大流量并发入库导致的库存负数的问题
2014/06/19 PHP
PHP编程中的常见漏洞和代码实例
2014/08/06 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
PHP加MySQL消息队列深入理解
2021/02/27 PHP
jquery下操作HTML控件的实现代码
2010/01/12 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
H5上传本地图片并预览功能
2017/05/08 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
vue 之 .sync 修饰符示例详解
2018/04/21 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
微信小程序云开发之模拟后台增删改查
2019/05/16 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
Python实现获取命令行输出结果的方法
2017/06/10 Python
Django视图和URL配置详解
2018/01/31 Python
python对常见数据类型的遍历解析
2019/08/27 Python
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
高中同学会活动方案
2014/08/14 职场文书
土地转让协议书
2014/09/27 职场文书
教师节倡议书2015
2015/04/27 职场文书
在 HTML 页面中使用 React的场景分析
2022/01/18 Javascript
mysql自增长id用完了该怎么办
2022/02/12 MySQL
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
在容器中使用nginx搭建上传下载服务器
2022/05/11 Servers
Centos7 Shell编程之正则表达式、文本处理工具详解
2022/08/05 Servers