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 相关文章推荐
javascript一些不错的函数脚本代码
Sep 10 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
Oct 11 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
jQuery选择器源码解读(一):Sizzle方法
Mar 31 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
jquery实现(textarea)placeholder自动换行
Dec 22 Javascript
JS使用setInterval实现的简单计时器功能示例
Apr 19 Javascript
在JavaScript中实现链式调用的实现
Dec 24 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
Jul 14 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
php中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
jquery弹出框的用法示例(2)
2013/08/26 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
webpack引入eslint配置详解
2018/01/22 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
小程序数据通信方法大全(推荐)
2019/04/15 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
Python如何生成树形图案
2018/01/03 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
Python带参数的装饰器运行原理解析
2020/06/09 Python
如何使用Pytorch搭建模型
2020/10/26 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
Java基础知识面试要点
2016/07/29 面试题
机关门卫岗位职责
2013/12/30 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
学生个人自我鉴定
2014/03/26 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
课外活动总结范文
2014/07/09 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
三好学生评语大全
2014/12/29 职场文书
辞职信如何写
2015/02/27 职场文书
学校少先队工作总结
2015/08/12 职场文书
早恋主题班会
2015/08/14 职场文书
送给教师们,到底该如何写好教学反思?
2019/07/02 职场文书
基于python的matplotlib制作双Y轴图
2021/04/20 Python