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 相关文章推荐
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
js焦点文字滚动效果代码分享
Aug 25 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
微信小程序 支付功能(前端)的实现
May 24 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
Vue cli+mui 区域滚动的实例代码
Jan 25 Javascript
JS正则表达式常见用法实例详解
Jun 19 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
javascript实现拼图游戏
Jan 29 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判断GIF图片是否为动画的方法
2020/09/04 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
关于__defineGetter__ 和__defineSetter__的说明
2007/05/12 Javascript
JavaScript 原型学习总结
2010/10/29 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
Easyui form combobox省市区三级联动
2016/01/13 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Bootstrap表格制作代码
2017/03/17 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
微信小程序异步处理详解
2017/11/10 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
2018/12/19 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Django rest framework实现分页的示例
2018/05/24 Python
python图形绘制奥运五环实例讲解
2019/09/14 Python
jupyter 使用Pillow包显示图像时inline显示方式
2020/04/24 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
HTML5语音识别标签写法附图
2013/11/18 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
介绍一下JNDI的基本概念
2013/07/26 面试题
AJAX的全称是什么
2012/11/06 面试题
英语专业学生的自我评价
2013/12/30 职场文书
教育学习自我评价
2014/02/03 职场文书
预备党员承诺书
2014/03/25 职场文书
比赛口号大全
2014/06/10 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang