在“zoomIn”动画开始时，背景: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>最佳答案
根据问题解释，这些是您需要在代码中进行的小更改。
$(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>关于javascript - 带有弹出框的动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61737722/