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

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

vue2使用transition过渡效果时,样式发生错误,过渡结束后,样式正确显示_第1张图片

过渡完成后,正确显示:

vue2使用transition过渡效果时,样式发生错误,过渡结束后,样式正确显示_第2张图片

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

同样的问题
其实我之前还没写过一个toast,并且用了css3的transform(-50%,-50%)结合了固定定位,让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上,另外建议 过渡上不要写动画,放在用v-show =“ show”上的元素上好点

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

你可能感兴趣的:(VUE)