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

Posted 2023-02-16

【中文标题】如何在弹出窗口中添加“过渡”

【英文标题】：How can I adding `transition` to my Popup

【发布时间】：2022-01-15 01:05:03

【问题描述】：

我有一个弹出窗口，弹出窗口在 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>

【问题讨论】：

因为您的弹出窗口已经存在，并且您只需通过 if 条件显示它。您需要添加其中具有转换的类。

我做了所有我理解的对不起请不要放弃我<div class="popup" :class="active" v-if="PopupBtn" > <transition name="fade"> <div class="popup-inner card active" :class="active"> data() progress: 0, PopupBtn: false, isActive: true, <style> .active transition: 2s !important;

【参考方案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 属性及其值。

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

【讨论】：

它不起作用，它仍然会突然撞到屏幕上。

你能在 github 上上传你的问题的最小复制品，或者在 stackblitz 上更好吗？无论如何，这是我在 stackblitz 上为您制作的一个示例，您可以看到它像我描述的那样工作。 stackblitz.com/edit/vue-3pcvqu

老兄，它成功了，谢谢。我正在努力成为一名优秀的开发人员和一名优秀的 ***er。我考虑到你说的话。我现在可以看到我不知道 ref 这就是为什么