亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何用純CSS動畫實現slide down效果?

如何用純CSS動畫實現slide down效果?

慕桂英546537 2018-11-06 13:15:19
用純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動畫庫也推薦下吧期待解答,謝謝大家~
查看完整描述

1 回答

  • 1 回答
  • 0 關注
  • 574 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號