css - vue2使用transition过渡效果时，样式发生错误，过渡结束后，样式正确显示

问题描述

问 题

问题

因为业务要求，我自己写了一个popup组件，在需要用户确认的地方调用显示，为了提升体验，所以想给popup增加淡入淡出的效果，于是用了animate.css和transition组件，但是在过渡过程中发生了样式错误，具体看下图:

过渡完成后，正确显示：

尝试

一开始，我认为可能是z-index的问题，但是尽管我把z-index调到100000，还是没有正确显示，而且过渡结束之后，是能正确显示的，说明z-index的设置没有问题。

同样的问题

其实我之前还写了一个toast，并且用了css3的transform（-50%，-50%）结合fixed定位，让toast在页面垂直居中显示，那时候同样想添加一个淡入弹出的效果，但是也发生了同样的问题，在过渡时，transform（-50%，-50%）没有奇效，导致toast的左上角的坐标为屏幕中心，而不是整体垂直居中，过渡结束后才回到正确的位置。

猜测

1、过渡效果会把某些css属性失效
2、过渡效果的时间点在某些css绑定属性之前

代码

    <!--popup-->
    <transition mode="out-in" enter-active-class="animated fadeIn" leave-active-class="animated fadeOut">
        <div class="popup-wrap" v-show="show">
            <div class="modal">
                <div class="popup">
                    <p class="title"><span>{{title}}</span><i @click="$emit('update:show',false)" class="iconfont icon-cuo"></i></p>
                    <p v-if="message_show" class="message">{{message}}</p>
                    <slot></slot>
                    <div class="btn-group">
                        <span @click="$emit('update:show',false)" class="cancel">取消</span>
                        <span @click="$emit('sure')" class="sure">确定</span>
                    </div>
                </div>
            </div>
        </div>
    </transition>

<style scoped lang="less">
    .popup-wrap {
        animation-duration: .5s;
        animation-timing-function:ease;
    }
    
    .modal {
        top: 0;
        left: 0;
        z-index: 1000;
        position: fixed;
        height: 100vh;
        width: 100vw;
        background: rgba(0, 0, 0, 0.7);
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .popup {
        display: flex;
        flex-direction: column;
        background: white;
        padding: 0 1.5rem;
        min-width: 60vw;
        .title {
            font-size: 1.6rem;
            height: 10vw;
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            font-weight: bold;
            & > i {
                font-size: 2rem;
                color: #cccccc;
            }
        }
        .message {
            padding: 1rem 0 2rem 0;
            font-size: 1.8rem;
        }
        .btn-group {
            font-size: 1.5rem;
            display: flex;
            width: 100%;
            margin-bottom: 1rem;
            justify-content: flex-end;
            & > span {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0.3rem 1.5rem;
                color: white;
                background: #FF5555;
                border-radius: 4px;
            }
            .cancel {
                margin-right: 1rem;
                color: #FF5555;
                background: white;
                border: 1px solid #ff5555;
            }
        }
    }
</style>

解决方案

是刚开始modal隐藏，popup-wrap没有高度导致的，可以去掉popup-wrap将 v-show="show"放在modal上，另外建议
transition上不要写animated，放在用 v-show="show"上的元素上好点

<div class="modal animated" v-show="show">
                        <div class="popup "></div>
</div>

这篇关于css - vue2使用transition过渡效果时，样式发生错误，过渡结束后，样式正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！