用纯CSS动画实现slide down想过几种思路:
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/...
js动画库
来实现了。所以如果有合适的js动画库
也推荐下吧
期待解答,谢谢大家~
max-height: 9999px;
没影响吧这样...
要点击的话利用:checked状态试下?思路如下
然后自己加动画
// 补充
由于高度不能固定,只能用animate中keyframes创建动画slideInDown
写了个demo,可以参考一下: https://jsfiddle.net/xiangry/...