Ein verstecktes Element anzeigen und dann animieren

Question

Wie kann ich die ausgeblendete form animieren von rechts nach links, nachdem die Klasse .button ausgeblendet ist. Ich kann so etwas machen, aber ich kann ihre Animationen nicht synchronisieren.
Wenn die button geklickt wird, geht es um einige Pixel nach rechts und wird dann ausgeblendet, und bevor es ausgeblendet wird, möchte ich die form animieren.

Wie kann ich den gleichen Effekt erstellen wie das Formular war innerhalb .button Klasse, und erscheint von dort?

Jede Hilfe sehr geschätzt! Hier

ist die Geige: fiddle link

Answer 1

$('a.button').click(function() { 
 
    $(this).addClass('hidden-btn'); 
 
    $('.myform').fadeIn('slow'); 
 
    $('.myform input').focus(); 
 
    });

.wrapper { 
 
    overflow: hidden; 
 
    height: 200px; 
 
} 
 
.button { 
 
    font-size: 18px; 
 
    background-color: lightblue; 
 
    width: 222px; 
 
    text-align: center; 
 
    height: 44px; 
 
    line-height: 40px; 
 
    text-transform: uppercase; 
 
    display: inline-block; 
 
    font-weight: 700; 
 
    margin-top: 100px; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    position: relative; 
 
    transition: all 0.4s 
 
} 
 
.hidden-btn { 
 
    left: 200%; 
 
} 
 
.myform { 
 
    float: left; 
 
    position: relative; 
 
    margin-top: 100px; 
 
    display: none; 
 
    left: 50%; 
 
    top: -145px; 
 
    transform: translateX(-50%); 
 
} 
 
.myform input { 
 
    float: left; 
 
    width: 284px; 
 
    height: 40px; 
 
    padding-left: 63px; 
 
    padding-right: 5px; 
 
    margin-top: 1px; 
 
    border: none; 
 
    color: #767676; 
 
    font-size: 13px; 
 
    background-color: lighgrey; 
 
} 
 
.myform button { 
 
    width: 170px; 
 
    height: 44px; 
 
    border: 0; 
 
    text-transform: uppercase; 
 
    color: #fff; 
 
    font-size: 16px; 
 
    background-color: lighblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <a href="#" class="button">Test</a> 
 
    <form class="myform" action=""> 
 
    <input type="text" placeholder="Email"> 
 
    <button type="submit">try</button> 
 
    </form> 
 
</div>

Answer 2

versuchen, dieses fiddle Update in diesem Beispiel verwenden wir CSS3 Animation.