3
我試圖使我的登錄屏幕的標題和歡迎頁腳緩慢地一起緩解，而不是在淡入輸入表單時一起對齊，這裏是一個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);