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

章鱼喵

发布于 2018-08-02 15:32:32

1.2K0

发布于 2018-08-02 15:32:32

文章被收录于专栏：codingcoding

在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
        }
    }
})

最终效果：