用純CSS動畫實現slide down想過幾種思路:1. 使用max-height top...配和transition設置定寬默認樣式為.more { -webkit-transition: max-height .35s ease-in-out; -moz-transition: max-height .35s ease-in-out; -o-transition: max-height .35s ease-in-out; transition: max-height .35s ease-in-out; max-height: 0; overflow: hidden;}.more.active { max-height: 1000px;}上面使用的固定的max-height,但是會影響動畫效果,另外如果高度大于指定高度會顯示不全,所以不能使用此方案。通過JS動態設置max-height之前嘗試設置max-height:100%,但是無效。但是如何能夠動態設置實際height為max-height是個問題,目前我是通過獲取元素的scrollHeight來設置為max-height,實現動畫效果,但是需要js操作是不特別爽,這樣的話我不如直接使用js動畫庫了。目前我的實現代碼(待改進):https://jsfiddle.net/godtail/...2. 如果沒好的方案就考慮使用js動畫庫來實現了。所以如果有合適的js動畫庫也推薦下吧期待解答,謝謝大家~
如何用純CSS動畫實現slide down效果?
慕桂英546537
2018-11-06 13:15:19