Vue动画篇（三）——半场动画

最新推荐文章于 2024-05-17 08:48:10 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2024-05-17 08:48:10 发布

阅读量312

点赞数

分类专栏： Vue.js 文章标签： vue.js css javascript 前端

本文链接：https://blog.csdn.net/qq_39055970/article/details/106387484

版权

Vue.js 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

Vue动画篇（三）——半场动画

半场动画
实现方式
所有的JavaScript钩子

半场动画

前两篇说明了如何使用过渡类和animate.css实现来回动画，就是初始状态到结束状态的动画和结束状态到初始状态的动画，可以理解为全场动画。但是有时候，我们只需要初始状态到结束状态的动画，那么，这样的动画，我们就可以称之为半场动画。

实现方式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vueApp</title>
    <style>
        .ball {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <button @click="flag = !flag">toggle</button>
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                flag: false
            },
            methods: {
                //注意：这是钩子函数的第一个参数：el, 表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
                //大家可以认为，el 时通过document.getElementById('')方式获得的原生的 JS DOM对象
                beforeEnter(el) {
                    //此时动画还未开始，可以在beforeEnter中设置元素开始动画之前的起始样式
                    //设置动画开始之前的其实位置
                    el.style.transform = 'translate(0,0)';
                },
                enter(el, done) {
                    //这句话没有实际的作用，但是如果不写，就不出动画效果
                    //这里可以认为 el.offsetWidth 会强制动画刷新
                    el.offsetWidth;
                    el.style.transform = 'translate(150px,450px)';
                    el.style.transition = 'all 1s ease';
                    //这里的done，就是 afterEnter 这个函数，也就是说：done 是 afterEnter 的引用
                    done();
                },
                afterEnter(el) {
                    //动画完成之后，会调用afterEnter
                    this.flag = !this.flag;
                }
            }
        });
    </script>
</body>

</html>

以上代码演示了一个小球从隐藏到出现，再移动到另一个位置，最后消失的半场动画，类似于购物车添加商品的动画。
其中的before-enter、enter和after-enter称为JavaScript钩子，可以在 attribute 中声明，表示在进行半场动画的不同阶段所对应的状态函数。函数写在methods中，并附有对应的代码说明。

所有的JavaScript钩子

v-on:before-enter=“beforeEnter”
v-on:enter=“enter”
v-on:after-enter=“afterEnter”
v-on:enter-cancelled=“enterCancelled”

v-on:before-leave=“beforeLeave”
v-on:leave=“leave”
v-on:after-leave=“afterLeave”
v-on:leave-cancelled=“leaveCancelled”

Sheldon一蓑烟雨任平生

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue动画篇（三）——半场动画

Vue动画篇（三）——半场动画半场动画实现方式所有的JavaScript钩子半场动画前两篇说明了如何使用过渡类和animate.css实现来回动画，就是初始状态到结束状态的动画和结束状态到初始状态的动画，可以理解为全场动画。但是有时候，我们只需要初始状态到结束状态的动画，那么，这样的动画，我们就可以称之为半场动画。实现方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"&gt
复制链接

扫一扫