隠し要素を表示してアニメーションします

Question

.buttonが非表示になってから、formを右から左にアニメーション化するにはどうすればよいですか。私はそのようなことをすることができますが、アニメーションを同期することはできません。
buttonがクリックされると、いくつかのピクセルで右に移動して非表示になり、非表示になる前にformをアニメーション化します。

フォームが.buttonクラス内にあるように、同じ効果を作成するにはどうすればできますか？

非常に助けてください！ここで

はフィドルです：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

たちはCSS3アニメーションを使用この例では、このfiddle更新 を試してみてください。