Javascript 隐藏其他影响元素位置的元素后，如何设置元素移动的动画

我试图让我的登录屏幕的标题和欢迎页脚慢慢地放在一起，而不是在我淡出输入表单时一起捕捉，下面是一个JSFIDLE，我用它来说明我要做的事情

就像我说的，我不希望文本拼凑在一起，而是希望在输入表单不碍事的情况下，文本可以轻松拼凑在一起

来自fiddle的代码：

html

js

---

我更新了您的代码，并得出以下结论：

---

我完全重新定位了您的

h1，h3

，这样我就可以用js使用它的

top

控制它。您可以通过将输入的不透明度更改为零

不透明度：0.0，使登录屏幕的标题和欢迎页脚一起慢慢放松两秒钟后再执行
显示：无以允许移动发生

看看这里的小提琴

以下是代码：


setTimeout（（）=>{
document.getElementById（“hide”）.className=“hideani”；
}, 2000)
设置超时（（）=>{
document.getElementById（“a”）.className+=“movea”；
}, 4000);
设置超时（（）=>{
document.getElementById（“b”）.className+=“moveb”；
}, 4000);
设置超时（（）=>{
document.getElementById（“c”）.className+=“movec”；
}, 4000);
设置超时（（）=>{
document.getElementById（“隐藏”）.className+=“隐藏”；
}, 4000);
设置超时（（）=>{
document.getElementById（“隐藏”）.className+=“无”；
}, 6000);
.hideani{
动画：淡出2s；
}
.没有{
显示：无；
}
movea先生{
位置：相对位置；
-webkit动画名称：examplea；
-webkit动画持续时间：2秒；
动画名称：examplea；
动画持续时间：2秒；
}
@-webkit关键帧示例a{
0%{左：0px；顶：0px；}
100%{left:0px；top:-56px；}
}
@关键帧示例a{
0%{左：0px；顶：0px；}
100%{left:0px；top:-56px；}
}
.moveb{
位置：相对位置；
-webkit动画名称：exampleb；
-webkit动画持续时间：2秒；
动画名称：exampleb；
动画持续时间：2秒；
}
@-webkit关键帧示例B{
0%{左：0px；顶：0px；}
100%{左：0px；顶：56px；}
}
@关键帧示例B{
0%{左：0px；顶：0px；}
100%{左：0px；顶：56px；}
}
.movec{
位置：相对位置；
-webkit动画名称：examplec；
-webkit动画持续时间：2秒；
动画名称：examplec；
动画持续时间：2秒；
}
@-webkit关键帧示例C{
0%{左：0px；顶：0px；}
100%{左：0px；顶：56px；}
}
@关键帧示例c{
0%{左：0px；顶：0px；}
100%{左：0px；顶：56px；}
}
.隐藏{
不透明度：0.0；
}
屈肌{
颜色：白色；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
背景：#37474F；
高度：300px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
h3，h1{
保证金：5px；
}
.分离器{
宽度：30%；
高度：1px；
边框底部：1px实心rgba（51,51,51,0.3）；
边缘底部：7px；
}
h3{
字号：200；
}
/*企图从http://stackoverflow.com/questions/18364938/how-to-animate-        elements-move-with-css3-transitions-after-hidden-some-element*/
//似乎不起作用
.过渡{
-webkit过渡：全部。5s轻松；
-moz过渡：全部5秒轻松；
-o型过渡：全部。5秒轻松；
过渡：所有。5s轻松；
}
@关键帧淡出{
从{opacity:1；}
到{不透明度：0；}
}
输入{
高度：25px；
边界半径：5px；
边界：无；
利润底部：3倍；
填充物：5px 5px 5px 10px；
字体大小：14px；
字号：700；
背景：#333；
颜色：白色；
}

站点名称






欢迎
都很好。但是没有提到高度的话，它就不会产生效果。
只需添加
隐藏框的高度即可显示效果*

降低
隐藏
框的高度，将
向前
效果应用于动画结束时的隐藏。无需使用
显示：无
隐藏类

#hide {
  height:120px;
  overflow:hidden;
 transition:all 1s ease;
}


setTimeout（（）=>{
document.getElementById（“hide”）.className=“hideani”；
document.getElementById（“隐藏”）.style.height=“1px”；
}，2000）
.hideani{
动画：衰减0.5s向前；
}
#隐藏{
高度：120px；
溢出：隐藏；
过渡：所有的1容易；
}
屈肌{
颜色：白色；
字体系列：Arial，“Helvetica Neue”，Helvetica，无衬线；
背景：#37474F；
高度：300px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
}
h3，h1{
保证金：5px；
}
.分离器{
宽度：30%；
高度：1px；
边框底部：1px实心rgba（51,51,51,0.3）；
边缘底部：7px；
}
h3{
字号：200；
}
/*企图从http://stackoverflow.com/questions/18364938/how-to-animate-elements-move-with-css3-transitions-after-hiding-some-element */
//似乎不起作用
.过渡{
-webkit过渡：全部。5s轻松；
-moz过渡：全部5秒轻松；
-o型过渡：全部。5秒轻松；
过渡：所有。5s轻松；
}
@关键帧淡出{
从{opacity:1；}
到{不透明度：0；}
}
输入{
高度：25px；
边界半径：5px；
边界：无；
利润底部：3倍；
填充物：5px 5px 5px 10px；
字体大小：14px；
字号：700；
背景：#333；
颜色：白色；
}

站点名称






欢迎

.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;
}

setTimeout(() => {
    document.getElementById("hide").className = "hideani";
}, 2000)

setTimeout(() => {
    document.getElementById("hide").className += " hide";
}, 4000);

var siteName = document.getElementById("h3");
  var welcome = document.getElementById("h1");

 setTimeout(() => {
  document.getElementById("hide").className = "hideani";
}, 2000)

setTimeout(() => {
  document.getElementById("hide").className += " hide";
    siteName.style.top = "113px"
  welcome.style.top = "147px"
}, 4000); 

#hide {
  height:120px;
  overflow:hidden;
 transition:all 1s ease;
}