其他分享
首页 > 其他分享> > VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂,适合新手

VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂,适合新手

作者:互联网

1. 概述

巴纳姆效应告诉我们:

人们更容易相信笼统的、常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌。

这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本是适合所有人的,再加上一些察言观色、随机应变的技巧,不明状况的人就会盲目的相信,觉得很“神”。

我们要学会正确的面对自己,增强自己的判断能力,才能做到真正的了解自己。

 

言归正传,今天我们来聊聊如何使用标签实现动画与过渡效果。

 

2.使用标签实现动画与过渡效果

2.1 普通的显示和隐藏

<body>
    <div id="myDiv"></div>
</body>
<script>
    const app = Vue.createApp({
        data(){
            return {
                show : false
            }
        },
        methods : {
            myClick() {
                this.show = !this.show;
            }
        },
        template:`
            <div>
                <div v-if="show">hello world</div>
                <button @click="myClick">切换</button>
            </div>
        `
    });
    const vm = app.mount("#myDiv");

 

 

 

 这是一个简单的例子,我们利用之前学过的 v-if 来简单实现 div 元素显示和隐藏的效果。接下来我们来给这个div元素加上动画和过渡效果。

 

2.2 标签 + 固定样式实现动画与过渡效果

<style>
        @keyframes leftRight {
            /* 进度为 X% 时,元素的横坐标位置 */
            0% {
                transform: translateX(0px);
            }
            33% {
                transform: translateX(-100px);
            }
            66% {
                transform: translateX(100px);
            }
            100% {
                transform: translateX(0px);
            }
        }

        /* 居中 */
        .center {
            text-align: center;
        }

        /* 入场起始样式 */
        .v-enter-from {
            opacity: 0;  /* 透明度 */
        }
        /* 入场过渡效果 */
        .v-enter-active {
            transition: 3s opacity ease-in;
            animation : leftRight 4s;
        }
        /* 入场结束样式 */
        .v-enter-to {
            opacity: 1;
        }

        /* 出场起始样式 */
        .v-leave-from {
            opacity: 1;  /* 透明度 */
        }
        /* 出场过渡效果 */
        .v-leave-active {
            transition: 3s opacity ease-out;
            animation : leftRight 4s;
        }
        /* 出场结束样式 */
        .v-leave-to {
            opacity: 0;
        }
</style>

 

    const app = Vue.createApp({
        data(){
            return {
                show : false
            }
        },
        methods : {
            myClick() {
                this.show = !this.show;
            }
        },
        template:`
            <div class="center">
                <transition>
                    <div v-if="show">hello world</div>
                </transition>
                <button @click="myClick">切换</button>
            </div>
        `
    });

这个例子中我们使用 transition 标签包裹在 div 外面,然后在样式中,使用了固定的 v-enter-from、v-enter-active、v-enter-to、v-leave-from、v-leave-active、v-leave-to 等样式描述了动画和过渡效果。

 

 

 

 

 

 

 

 

 

 

 

2.3 自定义样式名称

如果我们不想把样式名称固定,可以这样去写

        /* 入场起始样式 */
        .myTransition1-enter-from {
            opacity: 0;  /* 透明度 */
        }
        /* 入场过渡效果 */
        .myTransition1-enter-active {
            transition: 3s opacity ease-in;
            animation : leftRight 4s;
        }
        /* 入场结束样式 */
        .myTransition1-enter-to {
            opacity: 1;
        }

        /* 出场起始样式 */
        .myTransition1-leave-from {
            opacity: 1;  /* 透明度 */
        }
        /* 出场过渡效果 */
        .myTransition1-leave-active {
            transition: 3s opacity ease-out;
            animation : leftRight 4s;
        }
        /* 出场结束样式 */
        .myTransition1-leave-to {
            opacity: 0;
        }

 

    const app = Vue.createApp({
        data(){
            return {
                show : false
            }
        },
        methods : {
            myClick() {
                this.show = !this.show;
            }
        },
        template:`
            <div class="center">
                <transition name="myTransition1">
                    <div v-if="show">hello world</div>
                </transition>
                <button @click="myClick">切换</button>
            </div>
        `
    });

我们可以在 transition 标签上加上 name 属性,然后把刚才所有样式中开头的 v 替换成 name 的值即可。

 

3. 综述

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

欢迎帮忙点赞、评论、转发、加关注 :)

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

 

4. 个人公众号

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

标签:opacity,动画,show,样式,enter,通俗易懂,leave,VUE3
来源: https://www.cnblogs.com/w84422/p/15967454.html