CSSアニメーション - ズームのアニメーション

Question

私は2つのdivでHTMLページを持っています。 divはウィザードのステップを表します。ユーザーが最初の手順を完了した後、2番目の手順を画面から拡大します。それが現れてくると、それは自然に最初のステップを押し下げます。ユーザーが最初のステップで入力した情報は、2番目のステップの下に表示されます。

私はJSFiddle hereを作成しました。私のCSSアニメーションは、次のように定義されています。

.first-initial { 
    transition: all 1.0s ease; 
} 
.first-animation { 
    padding-left:3rem; 
    padding-right:3rem; 
} 

.second-initial { 
    transform: scaleY(0); 
    opacity: 0; 
    display: none; 
} 

.second-animation { 
    -webkit-animation-name: zoomIn; 
    -webkit-animation-delay: 1.0s; 

    animation-name: zoomIn; 
    animation-delay: 1.0s; 
}   

@-webkit-keyframes zoomIn { 
    from { 
    opacity: 0; 
    -webkit-transform: scale3d(.3, .3, .3); 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
} 

@keyframes zoomIn { 
    from { 
    opacity: 0; 
    -webkit-transform: scale3d(.3, .3, .3); 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
} 

私の問題はdisplay財産です。 displayプロパティをアニメーション化することはできません。しかし、displayプロパティをnoneに設定しないと、最初のステップが正しく配置されません。 2番目のステップが成長するにつれ、最初のステップを自然にどのようにプッシュしますか？

Answer 1

わかりません...「次のボタン」をクリックして次の入力を表示する必要がありますか？あなたが望むものであるかどうかを確認してください：

$('.next').click(function() { 
 
    var box = $(this).parents('.box').attr('data-box'); 
 
    $('[data-box="' + (Number(box) + 1) + '"]').slideDown(400); 
 
}); 
 

 
$('.send').click(function() { 
 
    $('.message').slideDown(400) 
 
});

.box { 
 
    display: none; 
 
} 
 
.active { 
 
    display: block; 
 
} 
 
label { 
 
    display: block; 
 
} 
 
.message { 
 
    display: none; 
 
    padding: 10px; 
 
    border: 1px solid green; 
 
    background: #EFE; 
 
    margin-bottom: 10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div class="container-toggle"> 
 
    <div class="message">Thanks!</div> 
 

 
    <div class="box" data-box="4"> 
 
    <label>Address</label> 
 
    <input type="text" /> 
 
    <button class="send">Next</button> 
 
    </div> 
 

 
    <div class="box" data-box="3"> 
 
    <label>Phone</label> 
 
    <input type="text" /> 
 
    <button class="next">Next</button> 
 
    </div> 
 

 
    <div class="box" data-box="2"> 
 
    <label>Name</label> 
 
    <input type="text" /> 
 
    <button class="next">Next</button> 
 
    </div> 
 

 
    <div class="box active" data-box="1"> 
 
    <label>Email</label> 
 
    <input type="email" /> 
 
    <button class="next">Next</button> 
 
    </div> 
 
</div>