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 相关文章推荐
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
js定时器怎么写?就是在特定时间执行某段程序
Oct 11 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
JavaScript中实现Map的示例代码
Sep 09 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
jquery+css3问卷答题卡翻页动画效果示例
Oct 26 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
Angular(5.2-&gt;6.1)升级小结
Dec 27 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 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函数
2010/01/11 PHP
用php解析html的实现代码
2011/08/08 PHP
php实现数据库的增删改查
2017/02/26 PHP
jQuery 注意事项 与原因分析
2009/04/24 Javascript
Javascript this 的一些学习总结
2012/08/31 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
JS实现两表格里数据来回转移的方法
2015/05/28 Javascript
Jquery 1.9.1源码分析系列(十二)之筛选操作
2015/12/02 Javascript
jstl中判断list中是否包含某个值的简单方法
2016/10/14 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
2016/11/08 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
微信小程序swiper左右扩展各显示一半代码实例
2019/12/05 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
2020/05/09 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python模拟登陆Tom邮箱示例分享
2014/01/13 Python
Python中利用函数装饰器实现备忘功能
2015/03/30 Python
在Python的Django框架的视图中使用Session的方法
2015/07/23 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
django中media媒体路径设置的步骤
2019/11/15 Python
Django跨域请求原理及实现代码
2020/11/14 Python
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
英文慰问信
2015/02/14 职场文书
新娘婚礼致辞
2015/07/27 职场文书
2016幼儿园新学期寄语
2015/12/03 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
前端JavaScript大管家 package.json
2021/11/02 Javascript
Nginx报错104:Connection reset by peer问题的解决及分析
2022/07/23 Servers