CSS：從 - >到百分比高度的關鍵幀

我正在嘗試使用CSS進行摺疊。我做了這樣的事情，但它不起作用。我認爲是動態高度問題，因爲當我在px中添加高度時，一切都是有效的。我該怎麼辦？CSS：從 - >到百分比高度的關鍵幀

@-moz-keyframes collapseIn { 
    from {height: 0%;} 
    to {height: 100%;} 
} 

@-webkit-keyframes collapseIn { 
    from {height: 0%;} 
    to {height: 100%;} 
} 

@keyframes collapseIn { 
    from {height: 0%;} 
    to {height: 100%;} 
} 
@-moz-keyframes collapseOut { 
    from {height: 100%;} 
    to {height: 0%;} 
} 

@-webkit-keyframes collapseOut { 
    from {height: 100%;} 
    to {height: 0%;} 
} 

@keyframes collapseOut { 
    from {height: 100%;} 
    to {height: 0%;} 
} 

.collapseCSS.ng-enter { 
    -webkit-animation: collapseIn 1s; 
    -moz-animation: collapseIn 1s; 
    animation: collapseIn 1s; 
} 
.collapseCSS.ng-leave { 
    -webkit-animation: collapseOut 1s; 
    -moz-animation: collapseOut 1s; 
    animation: collapseOut 1s; 
}

來源

2016-09-21 Sokołow

尋求代碼幫助的問題必須包含在問題本身**中重現它所需的最短代碼**最好在[** Stack Snippet **]（https://blog.stackoverflow.com/2014/09 /引入可運行的JavaScript-CSS-和HTML的代碼段/）。請參閱[**如何創建一個最小化，完整和可驗證的示例**]（http://stackoverflow.com/help/mcve） –

也就是說，您不能對未設置或未設置的高度進行動畫製作設置爲'auto'。 –

我解決了這個問題，通過添加一個最大高度：100vh;而不是100％。如果沒有人在摺疊開始時滾動頁面 - 它運行良好。 ;）

.collapseCSS { 
    overflow:hidden; 
}  
.collapseCSS.ng-enter-prepare{ 
    max-height: 0px; 
} 
.collapseCSS.ng-enter { 
    animation: ng-enter 1s; 
} 
.collapseCSS.ng-leave { 
    animation: ng-leave 1s; 
} 
@keyframes ng-leave { 
    from {max-height: 100vh;} 
    to {max-height: 0vh;} 
} 
@keyframes ng-enter { 
    from {max-height: 0vh;} 
    to {max-height: 100vh;} 
}

來源

2016-12-21 09:46:41

CSS：從 - >到百分比高度的關鍵幀

回答

相關問題