不定高元素的高度transition动画实现

分析文档描述

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。

不定高度动态元素height CSS3 transition过渡动画实例页面

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

CSS3的属性值unset

属性值unset的值为:如果该样式是能被继承的,则其值为继承的值;如果该样式是不能被继承的,则其值为CSS规范(CSS specifications)指定的值。

731
来自专栏ytkah

如何用<dl>标签做表格而不用table标签

  我们都知道很多的内容编辑器(TinyMCE编辑器、fck)都有插入表格功能,快速方便,但是这些表格用到的<table>标签,可以查看html源代码就能发现,...

2986
来自专栏技术总结

Hybird App之选择器详解(二)

2326
来自专栏向治洪

React-Native组件之 TabBarIOS和TabBarIOS.Item

TabBarIOS 组件简介 目前的APP内,大部分都是选项与选项之间切换,比如:微信、微博、QQ空间…,在iOS中,我们可以通过TabItem类进行实现,那么...

29110
来自专栏快乐八哥

DIV元素水平和垂直居中

在前端开发过程中,经常要对元素进行居中设置。一般有水平居中,和垂直居中。一般设置水平居中简单。基本是margin:0 auto,就可以了。但是垂直居中,我们有时...

3188
来自专栏一“技”之长

标签之美十——用户交互元素 原

任何一个网页都会提供用户交互的功能,包括账号密码的提交,留言板等用户信息的的获取。

703
来自专栏疯狂的小程序

微信小程序如何获取组件实际高度

viewscroll-view scroll-x scroll-with-animation scroll-left="{{menuIndex}}" style...

75110
来自专栏LeeCen

UIScrollView控件实现图片轮播

981
来自专栏python3

tkinter -- Event(1)

分别测试鼠标的 Relase 事件,只有当鼠标被 Relase 后移动才回产生 Relase 事件

501
来自专栏码农阿宇

HTML基础加强

1. 什么是浏览器:解释和执行HTML源码的工具。 2. 什么是静态页面,什么样的页面是动态页面? 静态页面:htm,html(直接读取) 动态网页:asp...

30810

扫码关注云+社区