Wie kann ich Elemente animieren, die sich bewegen, nachdem andere Elemente versteckt wurden, die ihre Positionierung beeinflussen?

Question

Ich versuche, meinen Titel und die Willkommensfußzeile meines Anmeldebildschirms langsam zusammenzufügen, anstatt zusammen zu schnappen, wenn ich das Eingabeformular ausgeblendet habe, hier ist ein Ich habe aufgepeitscht, um zu zeigen, was ich versuche zu tun.

https://jsfiddle.net/91ac4g0f/5/

Wie ich schon sagte, statt der Text schnappt zusammen will ich es zusammen zu erleichtern, sobald die Eingabemaske aus dem Weg ist.

-Code von Geige:

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

ich Ihren Code aktualisiert und kam mit dieser: 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); 

ich neu positioniert Ihre h1,h3 absolut, so kann ich es mit den js steuern seine top verwenden.

Answer 2

Sie können den Titel und die Fußzeile des Anmeldebildschirms langsam zusammenfügen, indem Sie die Opazität des Eingangs für zwei Sekunden auf Null opacity: 0.0; ändern, bevor Sie display: none; ausführen, damit die Bewegung stattfinden kann.

Schauen Sie sich die Geige hier https://jsfiddle.net/Lwsbh8fp/1/

und hier sind die Codes:

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

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

 
setTimeout(() => { 
 
\t document.getElementById("b").className += " moveb"; 
 
}, 4000); 
 

 
setTimeout(() => { 
 
\t document.getElementById("c").className += " movec"; 
 
}, 4000); 
 

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

 
setTimeout(() => { 
 
\t 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

Alle sind so gut.Aber die ohne Erwähnung height Seine Gewohnheit ah Effekt. Einfach hinzufügen Höhe der hide Box ihre zeigen den Effekt. Updated Fiddle *

Reduzieren Sie die Höhe der hide Box gilt die forwards Wirkung der Animation seines mit Leder mit Ende des animation.No müssen display:none verwenden, um mit ausblenden Klasse

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

setTimeout(() => { 
 
\t 
 
    document.getElementById("hide").className = "hideani"; 
 
    document.getElementById("hide").style.height = "1px"; 
 
}, 2000)

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

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