带有弹出框的动画答案

【问题标题】：Animation with Popups Box带有弹出框的动画
【发布时间】：2020-05-11 19:26:54
【问题描述】：

在“zoomIn”动画开始时，background: rgba(0, 0, 0, 0.5); 随之而来，但我正在尝试弹出框以显示 zoomIn 动画并且 background: rgba(0, 0, 0, 0.5); 应该已经存在。

点击弹出框中的提交按钮后，我正在尝试实现“backOutTop”的平滑动画，但是：
1）动画不流畅，很突然。
2）动画结束后，即使我设置了visibility: hidden;，弹出框似乎也没有隐藏。

如果有其他方法可以做到这一点。请分享。谢谢。

$(document).ready(() => {

  setTimeout(() => {
    $(".popUp").css('visibility', 'visible')
  }, 500); //Automatically Pops up after 0.5 sec.

});

document.querySelector('.btn-name').addEventListener('click', () => {

  document.querySelector('#popUpid').classList.remove('popUp');
  document.querySelector('#popUpid').classList.add('popUpClose');

});

body{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.popUp {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 101;
  position: absolute;
  visibility: hidden;
  animation: zoomIn;
  animation-duration: 3s;
}

.popUpClose {
  visibility: hidden;
  animation: backOutUp;
  animation-duration: 3s;
}

.popUpBox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 150px;
  border: 3px solid black;
  background: linear-gradient(to bottom right, #FFFF00, #00FF00);
}

.btn-name {
  margin-top: 10px;
  margin-left: 10px;
  width: 100px;
  font-size: 15px;
  cursor: pointer;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <section class="popUp" id="popUpid">
    <div class="popUpBox">
      <button class="btn-name">Submit</button>
    </div>
  </section>
  <section class="wrapper">
    <h1>
      Content
    </h1>
  </section>
</body>

【问题讨论】：

标签： javascript jquery animate.css

【解决方案1】：

根据问题解释，这些是您需要在代码中做的小改动。

$(document).ready(function() {

        setTimeout(() => {
            $(".popUp").css('visibility', 'visible')
        }, 500); //Automatically Pops up after 0.5 sec.
        
        $('.btn-name').click(function() {
            $('#popUpid').addClass('popUpClose');
        });
    });

    body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .popUp {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 101;
        position: absolute;
        visibility: hidden;
        animation: zoomIn;
        animation-duration: 3s;
        opacity: 1;
        transition: opacity 1s;
    }

    .popUpClose {
        opacity: 0;
        animation: backOutUp;
        animation-duration: 3s;
    }

    .popUpBox {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 150px;
        border: 3px solid black;
        background: linear-gradient(to bottom right, #FFFF00, #00FF00);
    }

    .btn-name {
        margin-top: 10px;
        margin-left: 10px;
        width: 100px;
        font-size: 15px;
        cursor: pointer;
    }

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp" id="popUpid">
            <div class="popUpBox">
                <button class="btn-name">Submit</button>
            </div>
        </section>
        <section class="wrapper">
            <h1>
                Content
            </h1>
        </section>

仅用于 popUP 上的静止背景和动画。

$(document).ready(function() {

        setTimeout(() => {
            $(".popUpBox").addClass('show');
            
        }, 500); //Automatically Pops up after 0.5 sec.
        
        $('.btn-name').click(function() {
            $('#popUpid').addClass('popUpClose');
            setTimeout(() => {
                $(".popUp").css('opacity','0');
        }, 1800);
        });
    });

body {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .popUp {
        display: block;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 101;
        position: absolute;
    }

    .popUpClose {
        opacity: 0;
        animation: backOutUpCustom;
        animation-duration: 3s;
    }

    .popUpBox {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0,0);
        width: 200px;
        height: 150px;
        border: 3px solid black;
        transition: all 3s;
        background: linear-gradient(to bottom right, #FFFF00, #00FF00);
    }
    .popUpBox.show {
        transform: translate(-50%, -50%) scale(1,1);
    }
    .btn-name {
        margin-top: 10px;
        margin-left: 10px;
        width: 100px;
        font-size: 15px;
        cursor: pointer;
    }
    @keyframes backOutUpCustom {
    0% {
        -webkit-transform: scale(1);
        transform: translate(-50%, -50%) scale(1,1);
        opacity: 1
    }

    20% {
        -webkit-transform: translate(-50%, 0) scale(0.7,0.7);
        transform: translate(-50%, 0) scale(0.7,0.7);
        opacity: .7
    }

    to {
        -webkit-transform: translate(-50%, -700px) scale(0.7,0.7);
        transform: translate(-50%, -700px) scale(0.7,0.7);
        opacity: .7
    }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="popUp">
            <div class="popUpBox" id="popUpid">
                <button class="btn-name">Submit</button>
            </div>
        </section>
        <section class="wrapper">
            <h1>
                Content
            </h1>
        </section>

【讨论】：

如果对你有帮助，别忘了标记为正确答案。
只是附带说明，最好根据设备渲染和 CPU 使用情况指定“过渡”而不使用“全部”。它往往会在低端和中端设备上累积并导致问题。
@Atul 这些正是我需要的更改。我只是想问我们可以处理背景吗，它伴随着动画，但是我们如何设置背景并使弹出框动画发生在它上面呢？我不想被听到贪婪，但我描述了这部分问题。否则非常感谢。你帮了大忙。
根据您的要求更改它，坐等，只是一个问题，您不想在背景部分添加任何动画或效果？它只是在设置超时和提交点击的情况下立即出现和消失？或者你总是想显示灰色背景？
当弹出窗口出现时，我希望灰色阴影出现在与内容部分重叠的背景上。因此，我们专注于在 bakcground 的灰色阴影上发生的弹出窗口及其动画。