不定高元素的高度transition动画实现
2018-05-16 19:40
941 查看
分析文档描述
CSS 支持动画的属性中的 height 属性如下:
height :yes, as a length, percentage or calc()
即:当 height 的值是 length,百分比或 calc() 时支持 CSS3 过渡。
所以当元素 height : auto 时,是不支持 CSS3 动画的。
解决办法
一、使用max-height属性代替height实现过渡效果
div{ max-height: 0; transition: max-height .5s; } div:hover{ max-height: 200px; }
二、使用js获取精确的 height 值
这里不做详细说明,可以看一下大神的demo。
相关文章推荐
- 元素显示与隐藏时的 transition动画效果原生与框架实现
- jQuery中实现不定高度height属性过渡为auto的animate动画
- CSS3 transition实现超酷图片墙动画效果
- 动画队列,第一个动画的字体变大和第二个动画的元素高度增加同时进行,两个动画完成之后,才触发第3个动画
- 父级高度未知,实现子元素居中
- CSS3transition实现的简单动画菜单
- css实现高度不固定的div元素模块在页面中水平垂直居中
- 分享:CSS3用transition实现边框动画效果
- 帮助你实现元素动画的6款插件
- JS实现动画兼容性的transition和transform实例分析
- Android共享元素场景切换动画的实现
- Activity切换时动画(animate)效果实现(overridePendingTransition)
- iOS UIView和CATransition的动画实现
- Android共享元素场景切换动画的实现
- css3_实现动画设置其过渡过程中的效果_transition
- CSS3 transition实现超酷图片墙动画效果
- react过渡动画效果的实现,react-transition-group
- 左右内容高度不定,使用border实现中间分割线
- 父、子容器高度不定,实现垂直居中