30vue学习——小球动画效果之afterEnter函数的定义

最新推荐文章于 2024-01-15 11:44:34 发布

0563xixi

最新推荐文章于 2024-01-15 11:44:34 发布

阅读量1.5k

点赞数 3

本文链接：https://blog.csdn.net/weixin_42530160/article/details/98589098

版权

30vue学习——小球动画效果之afterEnter函数的定义

前言

在前面的文章中，我们写了一个加入购物车的例子来学习动画的钩子函数的使用。在该例子中，我们在 afterEnter 函数内的定义的方法是给 flag 取非控制小球的消失，但是我们控制小球的消失还有其他的很多方法——透明度取 0 等。那我们就来看一下这些写法和直接给 flag 取非有什么不同吧。

实现加入购物车效果的总代码

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

<head>
    <meta charset="UTF-8">
    <title>钩子函数实现半场动画</title>
    <style>
        .ball {
            width: 15px;
            height: 15px;
            border-radius: 50%;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div class="body">
        <input type="button" value="加入购物车" @click="flag=!flag">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-show="flag"></div>
        </transition>
    </div>
    <script src="../lib/vue-2.4.0.js"></script>
    <script>
        let vm = new Vue({
            el: ".body",
            data: {
                flag: false,
            },
            // ...
            methods: {
                beforeEnter(el) {
                     // 设置小球开始动画之前的起始位置
                    el.style.transform = "translate(0,0)"
                },
                enter(el,done) {
                    el.offsetWidth;
                    /* 动画结束时小球的状态 */
                    el.style.transform = "translate(150px,450px)"
                    /* 动画改变的属性，动画持续的时间，动画的改变效果 */
                    el.style.transition = "all 1s ease"
                    done() 
                },
                afterEnter(el) {
                    // 只是这样的话小球会等一小段时间之后才消失
                    this.flag = !this.flag
                }
        })
    </script>
</body>

</html>

实现加入购物车效果的效果图

在这里插入图片描述
我们在 afterEnter 中让小球消失的方法是将 flag 取非：

那我们将让小球消失的方法设为 opacity=0，会有什么效果呢？

当我们点击了第一次按钮的时候，小球可以正常的出现以及消失，但是后面的点击小球却没有出现了，这是为什么呢？
+
在这里插入图片描述

解释：

1.给 flag 取非的方法：
（1）点击按钮：flag 的值 false ——> true，此时我们将执行我们定义好的入场动画
（2）执行 afterEnter 函数：flag 的值 true ——>false，我们立即将小球隐藏，则小球无需显式的离场（即使我们没有定义离场，但是小球也会离场）
（总）则每次点击按钮 flag 的值变化都是false ——> true，则点击按钮时小球都是出现的，所以每次点击都只有入场的动画，离场的已经在 afterEnter 函数立即执行了。

2.将小球的 opacity 设为 0：
（1）第一次点击按钮：flag 的值 false ——> true，此时我们将执行我们定义好的入场动
（2）第一次执行 afterEnter 函数：小球的 opacity 变为0，则小球消失，已经达到我们想要的效果了。
（3）第二次点击按钮：flag 的值 true ——> false 且小球的 opacity 已经为 0 ，则小球不会出现
（4）第二次执行 afterEnter 函数：小球的 opacity 已经为 0，则小球不会出现
（5）第三次点击按钮：flag 的值false ——> true但是小球的 opacity 已经为 0 ，则小球不会出现
（总）点击按钮会有将 flag 从 false ——> true 和 true ——> false 两种情况，但是在 afterEnter
函数中小球的样式已经被设置为 opacity = 0，所以小球在第一次点击之后的其他点击事件下不会出现。