如何在弹出窗口中添加“过渡”

Question

我有一个弹出窗口，弹出窗口在 2 秒内显示 setTimeout()，但我不能给它 transition 它突然显示并撞到屏幕上。我不希望这样，但我无法从 CSS 添加transition，我不知道为什么。我错过了什么吗？我不明白请帮助我，我很好奇为什么它没有发生。

<div class="popup" v-if="PopupBtn" >
                <transition name="fade">
                    <div class="popup-inner card" >
                        <slot />
                        <h2 class="fw-bolder">Suggested Offer</h2>
                        <p class="fw-bold my-4"> Do you want 2 times faster connection with a difference of 1$? </p>
                        <p> <i class="fas fa-check-circle me-2" style="color: limegreen;"></i>30 days money back guarantee</p>
                        <div class="d-flex flex-column justify-content-center align-items-center my-4">
                            <button class="popup-close my-3 btn btn-success w-100 py-3" @click="CloseBtn(); updateProgress();"> Yes </button>
                            <button class="popup-close btn btn-light w-100 py-3" @click="CloseBtn(); updateProgress();"> No </button>
                        </div>
                        <p> 97% of our users choose YES. </p>
                    </div>
                </transition>
</div>



export default {
    el: '#app',
    data() {
        return {
            todos: [
                { text: "Your answers are being analyzed.", progress: 20 },
                { text: "Account setup in progress.", progress: 40 },
                { text: "Server location setup is in progress.", progress: 60 },
                { text: "Your account is being created.", progress: 100 }
            ],
            progress: 0,
            PopupBtn: false,
        }
    },
    methods:{
        startProgress() {
            if ( this.progress < 75 ) {
                this.progress += 1;
            }
        },
        finishProgress(){
            if ( this.progress < 100 ) {
                this.progress += 1;
            }
            if (this.progress == 100 ) {
                setTimeout( () => this.$router.push({ path: '/tenthPage'}), 2000);
            }
        },
        updateProgress() {
            setInterval(this.finishProgress, 50)
        },
        buttonTrigger1() {
            this.PopupBtn = !this.PopupBtn;
            console.log("Popup is toggled");
        },
        CloseBtn() {
            console.log("Popup is closed");
            this.PopupBtn = false;
        },
    },
    created() {
        setInterval(this.startProgress, 1);
        setTimeout(this.buttonTrigger1 , 2000);
    }
}


<style>
.popup{
 position: fixed;  
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 99;
 background-color: rgba(0, 0, 0, 0.2);
 text-align: center;
 display: flex;
 align-items: center;
 justify-content: center;
 transition: 2s;
 }

.popup-inner{
  background: #fff;
  padding: 2rem;
  transition: 2s;
}
</style>

Answer 1

据我所知，您已设置“淡化”您调用的过渡名称，但此过渡没有此类 css 样式。

如 Vue 文档 (https://v3.vuejs.org/guide/transitions-enterleave.html#transitioning-single-elements-components) 中所示，您必须像这样定义转换类：

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

其中 leave-active / enter-active 定义应如何应用转换（哪些属性、持续时间……），而 enter-from / enter-leave 定义实际的变异 css 属性及其值。

上面有一个非常基本的工作淡入淡出过渡。