21.VUE显示和隐藏动画

最新推荐文章于 2024-09-13 10:49:07 发布

休息休息夏

最新推荐文章于 2024-09-13 10:49:07 发布

阅读量2.4k

点赞数 4

分类专栏： VUE基础学习文章标签： vue javascript css html

本文链接：https://blog.csdn.net/qq_42881159/article/details/117256548

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

VUE显示和隐藏动画

在这里插入图片描述

     <style>
        /*设置transition组件管理的内容在显示和隐藏时候的样式*/
        .v-enter-active,.v-leave-active{
            transition: all 2s;
        }
        .v-enter,.v-leave-to{
            opacity: 0;
        }
        .v-enter-to,.v-leave{
            opacity: 0.5;
        }
    </style>
    <body>
<div id="app">
    <button type="button" @click="toggle">{{btnMsg}}</button>
    <transition>
        <template v-if="isShow">
            <div style="height: 200px;width: 200px;background-color: red;line-height: 200px;text-align: center;color: #E9E7E7;font-size: 24px;font-weight: bold">
                RNG NB!
            </div>
        </template>
    </transition>

</div>
</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            isShow:true,
            btnMsg:'隐藏'
        },
        methods: {
            toggle(){
                this.isShow =! this.isShow;
                this.btnMsg = this.isShow?"隐藏":"显示"
            }
        },
    });
</script>

有 6 个(CSS)类名在 enter/leave 的过渡中切换

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入一帧后生效（于此同时 v-enter 被删除），在 transition/animation 完成之后移除。
v-enter-active: 定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在
transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发一帧后生效（于此同时 v-leave 被删除），在
transition/animation 完成之后移除。

在这里插入图片描述