VUE3 之动画与过渡的实现 - 这个系列的教程通俗易懂，适合新手

2023-10-09 10:33:22

1. 概述

光环效应告诉我们：

当一个人在某一方面取得了巨大的成功，人们就会给他贴上正面的标签，这个人从此就被“优秀”的光环所笼罩，他做的一切，人们都认为是正确的。

例如：越是名气大的明星代言的商品，买的人就越多。

反之亦然，当一个人在某一方面失败了，往往就会被贴上负面的标签，从此被“失败”的“光环”所笼罩，他做的一切，周围人都认为是错误的。

例如：一个人第一次做生意就失败了，则这个人再做什么决策，他的朋友都认为是错误的。

因此，我们要理性判断，不能被“光环”影响我们的判断。

言归正传，今天我们来聊聊 VUE 的动画与过渡。

2.动画与过渡

2.1 基于 class 的动画

    <style>
        /* 动画 */
        @keyframes leftRight {
            0% {
                transform: translateX(0px);
            }
            33% {
                transform: translateX(-100px);
            }
            66% {
                transform: translateX(100px);
            }
            100% {
                transform: translateX(0px);
            }
        }

        .animation_leftRight {
            animation : leftRight 4s;
        }
        .center {
            text-align: center;
        }
    </style>

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                animate : {
                    animation_leftRight : false
                }
            }
        },
        methods : {
            handleClick() {
                this.animate.animation_leftRight = !this.animate.animation_leftRight;
            }
        },
        template:`
            <div class="center">
                <div :class="animate">hello world</div>
                <button @click="handleClick">左右移动</button>
            </div>
            
        `
    });
    const vm = app.mount("#myDiv");
</script>

这个例子中，我们让 hello world 这段文字，在 4 秒钟的时间里，先向左移动，再向右移动，最后回到中间。

利用我们之前学的绑定 class 的方法，使用 :class="animate" 将 class 样式与数据绑定，最终实现效果。

2.2 基于 class 的过渡

    <style>
        /* 过渡 */
        .transition {
            transition : 3s background-color ease;
        }

        .blue {
            background : blue;
        }

        .green {
            background : green;
        }
    </style>

    const app = Vue.createApp({
        data(){
            return {
                transition : {
                    transition : true,
                    blue : true,
                    green : false
                }
            }
        },
        methods : {
            handleClick() {
                this.transition.blue = !this.transition.blue;
                this.transition.green = !this.transition.green;
            }
        },
        template:`
            <div>
                <div :class="transition">hello world</div>
            </div>
            <button @click="handleClick">切换</button>
        `
    });

该例中，我们将 hello world 的背景色，由蓝色渐变成绿色，同样是使用了 :class 绑定数据的方式。

2.3 过渡与 Style 的绑定

    const app = Vue.createApp({
        data(){
            return {
                styleObj : {
                    background : 'blue'
                }
            }
        },
        methods : {
            handleClick() {
                if(this.styleObj.background === 'blue') {
                    this.styleObj.background = 'green';
                } else {
                    this.styleObj.background = 'blue';
                }
                
            }
        },
        template:`
            <div>
                <div class="transition" :style="styleObj">hello world</div>
            </div>
            <button @click="handleClick">切换</button>
        `
    });

此例与上例的效果相同，只是使用 :style 的方式与数据绑定。

3. 综述

今天聊了一下 VUE3 的动画与过渡的实现，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中动画的相关知识，敬请期待

欢迎帮忙点赞、评论、转发、加关注：）

关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。

4. 个人公众号

追风人聊Java，欢迎大家关注

码农公寓

相关文章