不定高元素的高度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 条评论
登录 后参与评论

相关文章

来自专栏Java帮帮-微信公众号-技术文章全总结

JSP简单入门(3)

3、<jsp:param>标签 当使用<jsp:include>标签和<jsp:forward>标签引入或将请求转发给的资源是一个能动态执行的程序时,还可以使用...

3004
来自专栏电光石火

获取URL地址中的GET参数

/*-----------------实现1--------------------*/ function getPar(par){ //获取当前URL...

2019
来自专栏深度学习之tensorflow实战篇

python 字典操作提取key,value

python 字典操作提取key,value dictionaryName[key] = value 1.为字典增加一项 ? 2.访问字典中的值 ...

3735
来自专栏计算机视觉

Python 函数使用记录,join函数和os.path.join用法

1.join()函数 语法:‘sep’.join(seq) 参数说明: sep:分隔符。可以为空 seq:要连接的元素序列、字符串、元组、字典等 上面的语法即:...

2527
来自专栏HTML5学堂

JavaScript | 获取数组中的单词并统计出现次数

HTML5学堂(码匠):如何通过JavaScrip实现数组元素的查找?在一个数组当中,找到所有的单词,并统计每个单词出现的次数。 功能需求 在一个自定义数组...

3337
来自专栏搞前端的李蚊子

echarts图表里label文字过长换行的方法

在做一些图标时,有时会出现显示文字过长的问题,需要将其按照指定的字数换行,像下图这样 ? 而echarts没有提供换行的方法,但是可以使用fomatter方法进...

3087
来自专栏软件开发 -- 分享 互助 成长

case语句居然还可以这么用的

直接上代码了 // switch case case语句测试.cpp : 定义控制台应用程序的入口点。 // #include "stdafx.h" #inc...

17610
来自专栏Small Code

Python中strptime的简单使用

strptime是python datetime库中的函数,用于将一个日期字符串转成datetime日期格式便于后期处理,使用格式为datetime.strpt...

1828
来自专栏电光石火

获取URL地址中的GET参数

/*-----------------实现1--------------------*/ function getPar(par){ //获取当前URL...

1839
来自专栏null的专栏

python基础知识——控制语句

控制语句主要有条件语句和循环语句。 一、条件语句 1、if语句 格式 if 表达式: 语句1 else: 语句2 如下面的例子: ...

2986

扫码关注云+社区