我试图通过信封制作动画邀请函。我拥有我想要的大部分内容,但我遇到的问题是当你打开"信封,邀请弹出信封外面一秒钟,然后回到里面并开始动画。
我确定这是一个与动画相结合的z-index问题,但我不知道从哪里开始寻找。
我在https://codepen.io/zackpyle/pen/JyxpbM
的位置<style>
body{
font-family: helvetica, ariel ,san-serif;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 0px; /* Location of the box */
padding-bottom: 100px;
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
margin: auto;
padding: 0;
width: 80%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.frame{
width: 600px;
height: 350px;
margin: 250px auto 0;
position: relative;
background: #435d77;
border-radius:0 0 40px 40px;
}
#button_open_envelope{
width: 180px;
height: 30px;
position: absolute;
z-index: 311;
top: 250px;
left: 208px;
border-radius: 10px;
color: #fff;
font-size: 26px;
padding:15px 0;
border: 2px solid #fff;
transition: all .3s ease-in-out;
}
#button_open_envelope:hover{
background: #FFf;
color: #081D3D;
transform:scale(1.1);
cursor: pointer;
}
.message{
position: relative;
width: 580px;
min-height:300px;
height: auto;
background: #fff;
margin: 0 auto;
top: 30px;
box-shadow: 0 0 5px 2px #333;
transition:2s ease-in-out;
transition-delay:1.5s;
z-index: 300;
}
.left,.right,.top{width: 0; height: 0;position:absolute;top:0;z-index: 310;}
.left{
border-left: 300px solid #081d3d;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;
}
.right{
border-right: 300px solid #081d3d;
border-top: 160px solid transparent;
border-bottom: 160px solid transparent;;
left:300px;
}
.top{
border-right: 300px solid transparent;
border-top: 200px solid #193e6e;
border-left: 300px solid transparent;
transition:transform 1s,border 1s, ease-in-out;
transform-origin:top;
transform:rotateX(0deg);
z-index: 500;
}
.bottom{
width: 600px;
height: 190px;
position: absolute;
background: #072247;
top: 160px;
border-radius:0 0 30px 30px;
z-index: 310;
}
.open{
transform-origin:top;
transform:rotateX(180deg);
transition:transform .7s,border .7s,z-index .7s ease-in-out;
border-top: 200px solid #2c3e50;
z-index: 200;
}
.pull{
-webkit-animation:message_animation 2s 1 ease-in-out;
animation:message_animation 2s 1 ease-in-out;
-webkit-animation-delay:.9s;
animation-delay:.45s;
transition:1.5s;
transition-delay:1s;
z-index: 350;
}
@-webkit-keyframes message_animation {
0%{
transform:translatey(0px);
z-index: 300;
transition: 1s ease-in-out;
}
50%{
transform:translatey(-340px);
z-index: 300;
transition: 1s ease-in-out;
}
51%{
transform:translatey(-340px);
z-index: 350;
transition: 1s ease-in-out;
}
100%{
transform:translatey(0px);
z-index: 350;
transition: 1s ease-in-out;
}
}
@keyframes message_animation {
0%{
transform:translatey(0px);
z-index: 300;
transition: 1s ease-in-out;
}
50%{
transform:translatey(-340px);
z-index: 300;
transition: 1s ease-in-out;
}
51%{
transform:translatey(-340px);
z-index: 350;
transition: 1s ease-in-out;
}
100%{
transform:translatey(0px);
z-index: 350;
transition: 1s ease-in-out;
}
}
</style>
<div class="frame">
<div id="button_open_envelope" style="text-align: center;">
Open
</div>
<div class="message" style="text-align: center;">
<div>
<br>
<br>
<h1>Invitation</h1>
<h2>You're invited</h2>
<h3>Date | Time</h3>
</div>
</div>
<div class="bottom"></div>
<div class="left"></div>
<div class="right"></div>
<div class="top"></div>
</div>
</div>
<script>
$(document)
.ready(function() {
$('.frame')
.click(function() {
$('.top')
.addClass('open');
$('.message')
.addClass('pull');
})
});
</script>
答案 0 :(得分:2)
这很好用。只需更改pull类的CSS animation-fill-mode:forwards;
即可。最终动画将最终应用于元素的位置,检查参考以获取更多详细信息
<强> CSS:强>
.pull{
-webkit-animation:message_animation 2s 1 ease-in-out;
animation:message_animation 2s 1 ease-in-out;
-webkit-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-delay:.9s;
animation-delay:.45s;
transition:1.5s;
transition-delay:1s;
z-index: 300;
}
<强>参考文献:强>
答案 1 :(得分:2)
https://codepen.io/anon/pen/brzKRb
基本上你必须降低.message.pull
的z-index,并使用animation-fill-mode:forwards;
保持动画的最终状态
.pull{
-webkit-animation:message_animation 2s 1 ease-in-out;
animation:message_animation 2s 1 ease-in-out;
-webkit-animation-delay:.9s;
animation-delay:.45s;
transition:1.5s;
transition-delay:1s;
/* ### Edits ### */
z-index: 300;
animation-fill-mode:forwards;
-webkit-animation-fill-mode:forwards;
/* ### Edits ### */
}