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的eval()中使用函数的进一步讨论
Jul 26 Javascript
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
一款由jquery实现的整屏切换特效
Sep 15 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
vue项目常用组件和框架结构介绍
Dec 24 Javascript
基于form-data请求格式详解
Oct 29 Javascript
element实现合并单元格通用方法
Nov 13 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 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语法(2)
2006/10/09 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
用jquery实现学校的校历(asp.net+jquery ui 1.72)
2010/01/01 Javascript
关于URL中的特殊符号使用介绍
2011/11/03 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
使用JQuery实现Ctrl+Enter提交表单的方法
2015/10/22 Javascript
jQuery实现图片上传和裁剪插件Croppie
2015/11/29 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
[01:01:42]Secret vs Optic Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
从头学Python之编写可执行的.py文件
2017/11/28 Python
Python实现简单求解给定整数的质因数算法示例
2018/03/25 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
Django 路由控制的实现
2019/07/17 Python
Python pandas.DataFrame 找出有空值的行
2019/09/09 Python
python 字符串常用函数详解
2019/09/11 Python
Python使用matplotlib 画矩形的三种方式分析
2019/10/31 Python
python求前n个阶乘的和实例
2020/04/02 Python
python中spy++的使用超详细教程
2021/01/29 Python
django使用多个数据库的方法实例
2021/03/04 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
2014/04/10 HTML / CSS
印度尼西亚值得信赖的第一家网店:Bhinneka
2018/07/16 全球购物
三查三看党性分析材料
2014/02/18 职场文书
销售经理竞聘书
2014/03/31 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
房屋质量投诉书
2015/07/02 职场文书
高中运动会广播稿
2015/08/19 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
mongodb清除连接和日志的正确方法分享
2021/09/15 MongoDB
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android