带有弹出框的动画
Animation with Popups Box
在 'zoomIn' 动画开始时,background: rgba(0, 0, 0, 0.5);
随之出现,但我正在尝试的是让弹出框具有放大动画,并且 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>
在 'zoomIn' 动画开始时,background: rgba(0, 0, 0, 0.5);
随之出现,但我正在尝试的是让弹出框具有放大动画,并且 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>