動畫尺寸未知大小的轉換

我想動態顯示其內容動態變化的轉換尺寸（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; 
}

但過渡性質並沒有多大幫助。有任何想法嗎？

來源

2017-02-25 softcode

我認爲問題出在max-height: inherit; 嘗試在px中使用一些大的值（例如5000px）。你認爲的價值，你將永遠達不到。

來源

2017-02-25 22:44:20 pgrab86

你還沒有提到你如何交換你的問題中的註冊表單中包含的表單。

如果您要使用jQuery或類似的方法，並使用slideUp和slideDown函數，您可以輕鬆實現這種轉換。例如。 https://jsbin.com/fasujitoro/edit?html,js,output

如果這不是一種選擇，你能否提供更多的退貨。

來源

2017-02-25 22:44:30 fubar

我使用Vue.js – softcode

我掙扎放在一起用VueJS工作的例子（我沒有用它之前）。我期待使用轉換功能 - vuejs.org/v2/guide/transitions.html。我不認爲你實際上需要製作註冊表單的高度，而是要顯示/隱藏表單的高度。看到這個例子：https://jsbin.com/pinowoxufa/1/edit?html,css,output – fubar

我不知道max-height有可能轉變，也許這會有所幫助：

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

來源

2017-02-25 22:46:09

動畫尺寸未知大小的轉換

回答

相關問題