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 NameSpace 简单说明介绍
Jul 18 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
深入理解JavaScript系列(39):设计模式之适配器模式详解
Mar 04 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
javascript去除空格方法小结
May 21 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
Aug 10 Javascript
JavaScript中 this 指向问题深度解析
Feb 21 Javascript
原生JS实现九宫格抽奖效果
Apr 01 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 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常用函数和常见疑难问题解答
2014/03/05 PHP
求帮忙修改个php curl模拟post请求内容后并下载文件的解决思路
2015/09/20 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
SUN的《AJAX与J2EE》全文译了
2007/02/23 Javascript
javascript 计算两个整数的百分比值
2009/12/26 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
用jquery实现等比例缩放图片效果插件
2010/07/24 Javascript
Dom在ajax技术中的作用说明
2010/10/25 Javascript
Javascript this 的一些学习总结
2012/08/02 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
JavaScript中object和Object的区别(详解)
2017/02/27 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
2017/04/25 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
nodejs图片处理工具gm用法小结
2018/12/12 NodeJs
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
[03:55]DOTA2完美大师赛选手传记——LFY.MONET
2017/11/18 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
在Django框架中编写Contact表单的教程
2015/07/17 Python
python+django快速实现文件上传
2016/10/24 Python
Python基于matplotlib绘制栈式直方图的方法示例
2017/08/09 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
pandas数值计算与排序方法
2018/04/12 Python
python3中的md5加密实例
2018/05/29 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
Guess荷兰官网:美国服饰品牌
2020/01/22 全球购物
J2EE面试题
2016/03/14 面试题
考试不及格的检讨书
2014/01/22 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
实习生矿工检讨书
2014/10/13 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python