vue.js动画中的js钩子函数的实现


Posted in Javascript onJuly 06, 2018

在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。

以实现击球效果为例:

vue.js动画中的js钩子函数的实现

击球

代码解析:

<!-- 定义js的钩子函数 -->
<transition
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
>
  <img v-show="flag" class="ball" :src="ball" alt="" width="30">
</transition>
let vm = new Vue({
  el: "#app",
  data: {
    flag: false,
    ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
  },
  methods: {
    // el 表示要执行动画的那个DOM元素, 是原生的 js DOM 对象
    beforeEnter(el) {
      // 设置动画开始之前的初始位置
      el.style.transform = "translate(0, 0)"
    },
    enter(el, done) {
      // 刷新动画效果
      el.offsetWidth;
      // 动画完成后的样式
      el.style.transform = "translate(550px, 350px)";
      // 动画的持续时间
      el.style.transition = "all 3s ease";
      // done 其实是 afterEnter() 的引用
      done();
    },
    afterEnter(el) {
      // 动画完成之后调用
      this.flag = !this.flag
    }
  }
})

完整代码

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<style>
  .container {
    margin-top: 2%;
  }
  img.ball {
    margin-left: 3%;
  }
</style>
<body>
<div class="container">
  <div id="app">
    <button class="btn btn-danger" @click="flag=!flag">击球</button>
    <!-- 定义js的钩子函数 -->
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter"
    >
      <img v-show="flag" class="ball" :src="ball" alt="" width="30">
    </transition>
  </div>
</div>
<script>
  let vm = new Vue({
    el: "#app",
    data: {
      flag: false,
      ball: 'https://upload-images.jianshu.io/upload_images/1864602-ec73f549171a6601.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
    },
    methods: {
      // el 表示要执行动画的那个DOM元素, 是原生的 js DOM 对象
      beforeEnter(el) {
        // 设置动画开始之前的初始位置
        el.style.transform = "translate(0, 0)"
      },
      enter(el, done) {
        // 刷新动画效果
        el.offsetWidth;
        // 动画完成后的样式
        el.style.transform = "translate(550px, 350px)";
        // 动画的持续时间
        el.style.transition = "all 3s ease";
        // done 其实是 afterEnter() 的引用
        done();
      },
      afterEnter(el) {
        // 动画完成之后调用
        this.flag = !this.flag
      }
    }
  })
</script>
</body>
</html>

最终效果:

vue.js动画中的js钩子函数的实现

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

Javascript 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 Javascript
js中通过split函数分割字符串成数组小例子
Sep 21 Javascript
面向切面编程(AOP)的理解
May 01 Javascript
Bootstrap popover用法详解
Dec 22 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
Feb 15 Javascript
js 函数式编程学习笔记
Mar 25 Javascript
vue-router单页面路由
Jun 17 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
webpack4 css打包压缩问题的解决
May 18 Javascript
JavaScript中的连续赋值问题实例分析
Jul 12 Javascript
JavaScript 类的封装操作示例详解
May 16 Javascript
老生常谈JS中的继承及实现代码
Jul 06 #Javascript
vue.js使用v-if实现显示与隐藏功能示例
Jul 06 #Javascript
vue.js计算属性computed用法实例分析
Jul 06 #Javascript
vue.js实现的绑定class操作示例
Jul 06 #Javascript
vue.js实现插入数值与表达式的方法分析
Jul 06 #Javascript
详解浏览器缓存和webpack缓存配置
Jul 06 #Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
Jul 06 #Javascript
You might like
德劲1107的电路分析与打磨
2021/03/02 无线电
PHP中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
2012/03/05 PHP
linux环境apache多端口配置虚拟主机的方法深入介绍
2013/06/09 PHP
php合并js请求的例子
2013/11/01 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
php实现通过cookie换肤的方法
2015/07/13 PHP
PHP有序表查找之二分查找(折半查找)算法示例
2018/02/09 PHP
PHP实现微信退款的方法示例
2019/03/26 PHP
jquery 多级下拉菜单核心代码
2010/05/21 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JS数学函数Exp使用说明
2012/08/09 Javascript
一个通过script自定义属性传递配置参数的方法
2014/09/15 Javascript
js+jquery常用知识点汇总
2015/03/03 Javascript
基于JavaScript实现一定时间后去执行一个函数
2015/12/14 Javascript
AngularJS上拉加载问题解决方法
2016/05/23 Javascript
javascript实现复选框全选或反选
2017/02/04 Javascript
bootstrap table动态加载数据示例代码
2017/03/25 Javascript
JS获取一个表单字段中多条数据并转化为json格式
2017/10/17 Javascript
JS实现的冒泡排序,快速排序,插入排序算法示例
2019/03/02 Javascript
微信公众号网页分享功能开发的示例代码
2020/05/27 Javascript
[08:07]DOTA2每周TOP10 精彩击杀集锦vol.8
2014/06/25 DOTA
Python中的Descriptor描述符学习教程
2016/06/02 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
linux环境下Django的安装配置详解
2019/07/22 Python
python 的topk算法实例
2020/04/02 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
班主任工作经验材料
2014/02/02 职场文书
英语教师个人工作总结
2015/02/09 职场文书
会计专业自荐信范文
2019/05/22 职场文书
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android
js 实现Material UI点击涟漪效果示例
2022/09/23 Javascript