专栏首页codingvue.js动画中的js钩子函数

vue.js动画中的js钩子函数

在transition中还可以通过设置javascript钩子函数,实现自定义动画效果。

以实现击球效果为例:

击球

具体代码

代码解析:

<!-- 定义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
        }
    }
})

最终效果:

击球.gif

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • How do you compare two version Strings in Java?

    https://stackoverflow.com/questions/198431/how-do-you-compare-two-version-string...

    iOSDevLog
  • python中一切皆对象

    众所周知python是一款面向对象语言,在python语言中,可以说python的一切皆对象是不会错的。如果你学过java的话,你也会知道java也是一款面向对...

    sergiojune
  • 后端架构师技术图谱

    转自: GitHub/architect-awesome , 大体结构如下(更新时间: 2018-06-22)

    用户1216491
  • 干货 | 高级Java面试通关知识点整理!

    灯塔大数据
  • Java源码安全审查

    最近业务需要出一份Java Web应用源码安全审查报告, 对比了市面上数种工具及其分析结果, 基于结果总结了一份规则库. 本文目录结构如下: 

    用户1216491
  • 干货 | 国外大神总结的10个Java编程技巧!

    “任何可能出错的事情,最后都会出错。”这就是人们为什么喜欢进行“防错性程序设计”的原因。

    灯塔大数据
  • 教程 | 中国酷炫地图,大神教你用Python一边爬一边画

    先来聊聊为什么做数据分析一定要用Python或R语言。编程语言这么多种,Java, PHP都很成熟,但是为什么在最近热火的数据分析领域,很多人选择用Python...

    灯塔大数据
  • 谈谈如何抓取ajax动态网站

    什么是ajax呢,简单来说,就是加载一个网页完毕之后,有些信息你你还是看不到,需要你点击某个按钮才能看到数据,或者有些网页是有很多页数据的,而你在点击下一页的时...

    sergiojune
  • 图解Java常用数据结构(一)

    最近在整理数据结构方面的知识, 系统化看了下Java中常用数据结构, 突发奇想用动画来绘制数据流转过程.

    用户1216491
  • JAVA高性能I/O设计模式

    同步阻塞模式。在JDK1.4以前,使用Java建立网络连接时,只能采用BIO方式,在服务器端启动一个ServerSocket,然后使用accept等待客户端请求...

    cloudskyme

扫码关注云+社区

领取腾讯云代金券