未知のサイズでアニメーションサイズの遷移をアニメーションする

Question

動的に内容が変化するdivのサイズ（signupForm）の遷移をアニメーション化したいと思います。

各ステップのコンテナdivのサイズは不明です。

私はこれをCSSで行うことをお勧めします。

私はVue.jsを使ってフォームを交換しています。

<div class="signupForm"> 
    <component id="currentView"> 
    <FormOne></FormOne> 
    <FormTwo></FormTwo> 
    <FormThree></FormThree> 
    <FormFour></FormFour> 
    <FormFive></FormFive> 
    </component> 
</div> 

#signupForm残さないが、FormOneがFormTwoと交換ます決して、など

私は次のように追加しました：

.signupForm { 
    max-height:inherit; 
    display:inline-block; 
    transition: max-height 0.3s ease-in-out; 
} 

しかし、遷移特性はあまり助けにはなりませんでした。何か案は？

Answer 1

私は問題があると思います。max-height: inherit; pxでいくつかの大きな値（たとえば5000px）を使用してみてください。あなたが考える価値は、あなたは決して到達しません。

Answer 2

ご質問にサインアップフォームに含まれているフォームを交換する方法は記載されていません。

jQueryなどを使用していて、slideUpとslideDownの関数を使用した場合、このような移行を簡単に行うことができます。例えば。 https://jsbin.com/fasujitoro/edit?html,js,output

これがオプションでない場合は、より詳細な情報を提供できますか？

Answer 3

私はmax-heightはたぶんこのことができます、可能性を変換していることを確認していない：

.signupForm { 
    max-height:inherit; 
    display:inline-block; 
    transition: height 0.3s ease-in-out; 
}