我试图使我的登录屏幕的标题和欢迎页脚缓慢地一起缓解,而不是在淡入输入表单时一起对齐,这里是一个jsfiddle我鞭打,以说明我想要做什么。如何在隐藏影响其定位的其他元素之后移动元素的动画
https://jsfiddle.net/91ac4g0f/5/
就像我说的,而不是文本卡接在一起,我希望它缓解在一起一旦输入形式的出路。从小提琴
代码:
HTML
<div class="flexer">
<h3 class="transition">
Site Name
</h3>
<div class="seperator"></div>
<div id="hide">
<input type="text" placeholder="Username"><br>
<input type="password" placeholder="Password"><br>
<input type="password" placeholder="Password Confirmation"><br>
</div>
<h1 class="transition">
Welcome
</h1>
</div>
CSS
.hideani {
animation: fadeout 2s;
}
.hide {
display: none;
}
.flexer {
color: white;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
background: #37474F;
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h3, h1 {
margin: 5px;
}
.seperator {
width: 30%;
height: 1px;
border-bottom: 1px solid rgba(51, 51, 51, 0.3);
margin-bottom: 7px;
}
h3 {
font-weight: 200;
}
/* attempt from http://stackoverflow.com/questions/18364938/how-to-animate-elements-move-with-css3-transitions-after-hiding-some-element */
// Didn't seem to work
.transition {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
input {
height: 25px;
border-radius: 5px;
border: none;
margin-bottom: 3px;
padding: 5px 5px 5px 10px;
font-size: 14px;
font-weight: 700;
background: #333;
color: white;
}
JS
setTimeout(() => {
document.getElementById("hide").className = "hideani";
}, 2000)
setTimeout(() => {
document.getElementById("hide").className += " hide";
}, 4000);