如何将“过渡”添加到我的弹出窗口

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 属性和他们的价值观。

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

如何将“过渡”添加到我的弹出窗口

How can I adding `transition` to my Popup

html

css

vue.js

vue-component

vuejs2