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 第二课 操作包装集元素代码
Mar 14 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
js实现汉字排序的方法
Jul 23 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
详解JavaScript中的函数、对象
Apr 01 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
Vue实现返回顶部按钮实例代码
Oct 21 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
让innerHTML的脚本也可以运行起来
2006/07/01 Javascript
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
JS实现根据密码长度显示安全条功能
2017/03/08 Javascript
angular directive的简单使用总结
2017/05/24 Javascript
Vue 组件封装 并使用 NPM 发布的教程
2018/09/30 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
[13:21]DOTA2国际邀请赛采访专栏:RSnake战队国士无双,Fnatic.Fly
2013/08/06 DOTA
python实现搜索本地文件信息写入文件的方法
2016/02/22 Python
python3音乐播放器简单实现代码
2020/04/20 Python
浅谈django中的认证与登录
2016/10/31 Python
python 统计代码行数简单实例
2017/05/04 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
Python实现批量执行同目录下的py文件方法
2019/01/11 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
YSL圣罗兰美妆英国官网:Yves Saint Laurent Beauty UK
2019/08/03 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
工程造价专业大学生自荐信
2013/10/01 职场文书
社区工作者思想汇报
2014/01/13 职场文书
药剂专业求职信
2014/06/20 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
一般基层干部群众路线教育实践活动个人对照检查材料
2014/11/04 职场文书
青岛导游词
2015/02/12 职场文书
2015年团支部工作总结
2015/04/03 职场文书
详解Python中的进程和线程
2021/06/23 Python
英镑符号 £
2022/02/17 杂记