带有弹出框的动画

问题描述 投票：2回答：1

在'zoomIn'动画的开始，background: rgba(0, 0, 0, 0.5);随它一起出现，但我想做的是弹出框以显示zoomIn动画，并且background: rgba(0, 0, 0, 0.5);应该已经存在。

并且我正在尝试在弹出框中单击Submit按钮后实现'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个回答
2
投票

根据问题的解释，这些是您需要在代码中进行的微小更改。

$(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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.