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 相关文章推荐
asp.net+js 实现无刷新上传解析csv文件的代码
May 17 Javascript
jQuery中append、insertBefore、after与insertAfter的简单用法与注意事项
Apr 04 Javascript
jQuery构造函数init参数分析
May 13 Javascript
Javascript常用小技巧汇总
Jun 24 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
jQuery图片切换动画特效
Nov 02 Javascript
微信小程序实现添加手机联系人功能示例
Nov 30 Javascript
js判断节假日实例代码
Dec 27 Javascript
在小程序中使用腾讯视频插件播放教程视频的方法
Jul 10 Javascript
js中关于Blob对象的介绍与使用
Nov 29 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
老生常谈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中使用Oracle数据库(3)
2006/10/09 PHP
PHP VS ASP
2006/10/09 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
header跳转和include包含问题详解
2012/09/08 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
Laravel ORM 数据model操作教程
2019/10/21 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
2016/02/17 Javascript
JS 清除字符串数组中,重复元素的实现方法
2016/05/24 Javascript
AngularJS基础 ng-mouseover 指令简单示例
2016/08/02 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
node.js 中间件express-session使用详解
2017/05/20 Javascript
js实现水平滚动菜单导航
2017/07/21 Javascript
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
python爬虫爬取淘宝商品信息(selenum+phontomjs)
2018/02/24 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
pandas条件组合筛选和按范围筛选的示例代码
2019/08/26 Python
Pytorch实现LSTM和GRU示例
2020/01/14 Python
Python脚本破解压缩文件口令实例教程(zipfile)
2020/06/14 Python
python中pow函数用法及功能说明
2020/12/04 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
美国老牌主机服务商:iPage
2016/07/22 全球购物
最新的大学生找工作自我评价
2013/09/29 职场文书
新法人代表任命书
2014/06/06 职场文书
国际金融专业自荐信
2014/07/05 职场文书
小学趣味运动会加油稿
2014/09/25 职场文书
党员教师四风问题对照检查材料
2014/09/26 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
教师思想工作总结2015
2015/05/13 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
基于CSS3画一个iPhone
2021/04/21 HTML / CSS
Python 匹配文本并在其上一行追加文本
2022/05/11 Python