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

beanlam 发布于2019-04-23 13:43 / 2432人阅读

摘要：分析文档描述分析文档描述支持动画的属性中的属性如下即当的值是，百分比或时支持过渡。不定高度动态元素过渡动画实例页面

分析文档描述

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过渡动画实例页面

云服务器 GPU云服务器 html p元素高度元素动画实现加载动画 javascript实现动画

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2254.html

《CSS世界》阅读笔记（二）——块级元素与基本尺寸

摘要：块级元素基本概念块级元素是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。其中内部尺寸由内部元素决定还有一类叫作外部尺寸宽度由外部元素决定。所以子元素的高度设为是无效的。此时的就会有计算值，即使祖先元素的计算为也是如此。块级元素基本概念块级元素：是一个水平流上只能单独显示一个元素，多个块级元素则换行显示。块级元素和display 为 block 的元素不是一个概念。每...

lylwyy2016 2019-08-29 18:31 评论0 收藏0
CSS3学习笔记

摘要：只对英文起作用，以单词作为换行依据。换句话说，字符串与属性值中的任意位置相匹配。其主要有两个值和。主要具有四个属性值和。或表示红色，表示绿色，表示蓝色，也可取其他数值来指定颜色。 1.文档换行 a.强制一排显示文本，多出的地方切割文本，并加上省略号，三句真言 text-overflow:ellipsis; /*实现溢出时产生省略号的效果, 或者clip表示剪切*/ overflow:h...

Flink_China 2019-08-29 12:36 评论0 收藏0
第一课关于侧边栏下拉手风琴的实现

摘要：一主要知识点布局，变换，事件触发二属性记忆规则子元素会继承父元素的布局属性。盒子的实际宽度设置的和不会影响实际宽度定位属性，用于上的角形的实现，此次小角形实现需要用到父相对位置，子绝对位置。一、主要知识点：html布局，css变换，js事件触发二.CSS属性记忆： CSS规则：子元素会继承父元素的布局属性。不专门改变子元素的属性，其会跟随父元素。功能语句 marg...

番茄西红柿 2019-04-23 11:52 评论0 收藏0