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写的异步加载js文件函数(支持数组传参)
Jun 07 Javascript
使用javascript实现Iframe自适应高度
Dec 24 Javascript
学习JavaScript设计模式之代理模式
Jan 12 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
js的三种继承方式详解
Jan 21 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
Aug 31 Javascript
vue富文本框(插入文本、图片、视频)的使用及问题小结
Aug 17 Javascript
Three.js中矩阵和向量的使用教程
Mar 19 Javascript
原生javascript如何实现共享onload事件
Jul 03 Javascript
vue mvvm数据响应实现
Nov 11 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使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
php 使用redis锁限制并发访问类示例
2016/11/02 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
2010/12/06 Javascript
JSON为什么那样红为什么要用json(另有洞天)
2012/12/26 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
使用Chrome浏览器调试AngularJS应用的方法
2015/06/18 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
AngularJS ng-controller 指令简单实例
2016/08/01 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
详解@angular/cli 改变默认启动端口两种方式
2018/11/29 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
[16:01]夜魇凡尔赛茶话会 第二期01:你比划我猜
2021/03/11 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
基于scrapy的redis安装和配置方法
2018/06/13 Python
对Python random模块打乱数组顺序的实例讲解
2018/11/08 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Python time库基本使用方法分析
2019/12/13 Python
Python实现AI自动抠图实例解析
2020/03/05 Python
Python和Bash结合在一起的方法
2020/11/13 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
节能标语大全
2014/06/21 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
CSS实现九宫格布局(自适应)的示例代码
2022/02/12 HTML / CSS
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android