Question

我试图让我的标题和欢迎登录屏幕的页脚慢慢缓和，而不是在我淡出输入表格时拼凑在一起，这是一个jsfiddle我掀起来说明我的＆＃39;我试图做。

就像我说的那样，一旦输入表格不在考虑范围内，我希望它能够在一起轻松一下。

来自小提琴的代码：

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);

Answer 1

我更新了您的代码并提出了这个问题：JSFiddle

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);

我完全重新定位了你的h1,h3所以我可以使用top来控制它。

Answer 2

在执行opacity: 0.0;之前，您可以通过将输入的不透明度更改为零display: none;两秒钟来缓慢缓解登录屏幕的标题和欢迎页脚，以便允许移动发生。

在这里查看小提琴 https://jsfiddle.net/Lwsbh8fp/1/

以下是代码：

setTimeout(() => {
    document.getElementById("hide").className = "hideani";
}, 2000)

setTimeout(() => {
    document.getElementById("a").className += " movea";
}, 4000);

setTimeout(() => {
	document.getElementById("b").className += " moveb";
}, 4000);

setTimeout(() => {
	document.getElementById("c").className += " movec";
}, 4000);

setTimeout(() => {
	document.getElementById("hide").className += " hide";
}, 4000);

setTimeout(() => {
	document.getElementById("hide").className += " none";
}, 6000);

.hideani {
  animation: fadeout 2s;
}

.none {
  display: none;
}

.movea {
    position: relative;
    -webkit-animation-name: examplea;
    -webkit-animation-duration: 2s;
    animation-name: examplea;
    animation-duration: 2s;
}

@-webkit-keyframes examplea {
    0%   {left:0px; top:0px;}
    100%  {left:0px; top:-56px;}
}

@keyframes examplea {
    0%   {left:0px; top:0px;}
    100%  {left:0px; top:-56px;}
}

.moveb {
    position: relative;
    -webkit-animation-name: exampleb;
    -webkit-animation-duration: 2s;
    animation-name: exampleb;
    animation-duration: 2s;
}

@-webkit-keyframes exampleb {
    0%   {left:0px; top:0px;}
    100%  {left:0px; top:56px;}
}

@keyframes exampleb {
    0%   {left:0px; top:0px;}
    100%  {left:0px; top:56px;}
}

.movec {
    position: relative;
    -webkit-animation-name: examplec;
    -webkit-animation-duration: 2s;
    animation-name: examplec;
    animation-duration: 2s;
}

@-webkit-keyframes examplec {
    0%   {left:0px; top:0px;}
    100%  {left:0px; top:56px;}
}

@keyframes examplec {
    0%   {left:0px; top:0px;}
    100%  {left:0px; top:56px;}
}

.hide {
  opacity: 0.0;
}

.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;
}

<div class="flexer">
  <h3 id="b" class="transition">
    Site Name
  </h3>
  <div id="c" 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 id="a" class="transition">
    Welcome
  </h1>
</div>

Answer 3

一切都那么好。但是没有提及height它不会给出效果啊。只需添加 hide框 的高度即可显示效果。的 的 Updated Fiddle *

降低hide框的高度应用动画的forwards效果与动画结束时隐藏。不需要将display:none与隐藏类一起使用

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

＆＃13;
＆＃13;
setTimeout(() => { document.getElementById("hide").className = "hideani"; document.getElementById("hide").style.height = "1px"; }, 2000)
＆＃13;
.hideani { animation: fadeout 0.5s forwards; } #hide { height:120px; overflow:hidden; transition:all 1s ease; } .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; }
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

如何隐藏影响其定位的其他元素后移动的元素

3 个答案: