html加动画不改变高度,怎么为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画...

如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画

但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度。

但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢?

从 MDN 的可以查到 CSS 支持动画的属性中的 height 属性如下:

length, percentage or calc(); // 当 height 的值是 length,百分比或 calc() 时支持 CSS3 过渡。

所以当元素 height : auto 时,是不支持 CSS3 动画的。

除了通过 JS 获取精确的 height 值的方法外,其实我们可以使用 max-height 代替 height。

只要我们设置一个肯定比元素自增长大的高度值就可以了。当然,因为是根据 max-height 值进行过渡效果,所以最好不要大得离谱,否则动画效果不理想。

1

2

3

4

5

6 *{

7 margin:0;

8 padding:0;

9 }

10 div{

11

12 display:inline-block;

13 overflow:hidden;

14 background-color:orange;

15 max-height:20px;

16 -webkit-transition:max-height 1s;

17 transition:max-height 1s;

18 }

19 div:hover{

20 max-height:200px;

21 }

22

23

24

25

26

我不是height,是max-height

27

我不是height,是max-height

28

我不是height,是max-height

29

我不是height,是max-height

30

我不是height,是max-height

31

我不是height,是max-height

32

33

34

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/559091.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

高并发负载均衡——网络协议原理

一、网络分层模型 软件工程项目学中有一个重要的思想就是分层解耦。OSI七层模型,TCP/IP四层(有时将数据链路层和物理层分开称为五层模型),都是为了更好的实现网络的互通。 应用层:网络服务于最终用户的一个接口&#…

Linux常用命令~~~

Linux常用命令~~~1. 查看当前的Linux服务器的运行级别 ‘who -r’ 和‘runlevel’命令可以查看当前linux服务器运行级别 2. 查看Linux的默认网关 ‘route -n’和‘nestat - nr’可以查看默认网关,也可以显示当前路由表。 3. 查看bond0状态:cat /pro/net/…

文件存储

最近正在写有关文件操作的程序,搞得我也是焦头烂额。业务很简单:前台用户需要选择一个jar包然后上传到服务器(localhost)然后由后台的Java程序进行指定目录的存储,然后将文件路径转存到mongodb中。 但是,前…

2021年高考理综单科成绩查询,2021年高考总分是多少 2021年高考各科满分多少分...

高考总分不同地区可能会有一些小差异,不过大体上是相同的,由于每年全国各地高考的政策和说明都会有一些变化,所以高考总分也可能会有改变,及时了解这些变化是每一个参加高考的学子都必须要注意的。小编整理了《2021高考总分是多少…

javaweb通过接口来实现多个文件压缩和下载(包括单文件下载,多文件批量下载)

程序员在做web等项目的时候,往往都需要添加文件上传、下载、删除的功能,有时是单文件,有时多文件批量 操作,而这些功能的代码程序员可以自己收藏起来当成工具使用,这样,程序员在进行程序设计的时候就会事半…

html cookie传参,页面间固定参数,通过cookie传值的实现方法

最后在做的页面,比如用户数据(用户头像,名称,年龄)这些信息,因为大部分页面都要用,之前是通过url地址传,另一页面接收。考虑到这样做会让url过长,因此,尝试使用cookie,把…

传统form表单提交方式的文件上传与文件存储

引言 时隔一天,上一篇文章《文件存储》刚一停笔,今天上午就解决了困扰我已久的文件上传问题。 站在一个已实现功能的角度来重新看待这个文件上传的业务:编辑页面选择jar包,然后通过form表单提交,上传到后台程序&…

eclipse项目一直显示有错,但是一直找不到错误在哪里

eclipse项目一直显示有错,但是一直找不到错误在哪里 这天在写项目的时候碰到了这么个问题,项目上一直提示着红叉,但不管是文件里还是java buildpath里都找不到报错,很纳闷了~最后终于给我找到方法了~如下: 类似于下面这…

微型计算机硬件性能取决于什么,微型计算机硬件系统的性能主要取决于

大家好,我是时间财富网智能客服时间君,上述问题将由我为大家进行解答。微型计算机硬件系统的性能主要取决于微处理器。微处理器能完成取指令、执行指令,以及与外界存储器和逻辑部件交换信息等操作,是微型计算机的运算控制部分。它可与存储器和外围电路芯…

LeetCode(#1)————Two Sum

问题描述 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标。 你可以假设每种输入只会对应一个答案。但是,你不能重复利用这个数组中同样的元素。 Given nums [2, 7, 11, 15…

Log4j文件配置教程大全

Log4j文件配置教程大全~Log4J的配置文件(Configuration File)就是用来设置记录器的级别、存放器和布局的,它可接keyvalue格式的设置或xml格式的设置信息。通过配置,可以创建出Log4J的运行环境。1, 整体框架介绍:#配置根Logger log…

微型计算机和接口技术考题,微型计算机接口技术以及应用考题

一、单项选择题1.通常在外设接口中,往往有( )端口才能满足和协调外设工作要求。A.数据 B.数据、控制 C.数据、控制、状态 D.控制、缓冲2.独立I/O端口编址方式中,端口地址…

Java本地文件操作

概述:Java本地文件操作,涉及到文件/文件夹的创建,文件/文件夹属性的读取与设置,文件/文件夹的重命名,目录结构的遍历,以及文件内容的读取与写入。 File属于java.io.File。 ---在Eclipse的大纲视图界面&…

GitBlit使用安装教程~

GitBlit使用安装教程~GitBlit是什么?Gitblit 是一个纯 Java 库用来管理、查看和处理 Git 资料库.相当于 Git 的 Java 管理工具.git的管家,通俗点来说就是一个相当于SVN的工具,用于多个人共同开发同一个项目,共用资源的目的。 下载与安装: 1. …

怎么用计算机名称共享打印机设置,如何共享打印机设置教程

打印机怎么共享,算是老问题了,但很多时候分享都是老系统的,这里分享WIN7系统和win10系统两种系统的打印机如何共享的设置教程。一、WIN7设共享准备工作:添加打印机之前我们要知道主机的一些信息,如计算机名、工作组、共…

Java项目转变为Java Web项目

1、找到项目工作空间目录&#xff0c;打开.project文件&#xff0c;并修改文件&#xff0c; 修改如下&#xff1a; 找到&#xff1a;<natures> </natures>代码段&#xff0c;在代码段中加入如下内容并保存&#xff1a; <nature>org.eclipse.wst.common.proje…

计算机网络学习总结

计算机网络学习总结~1. OSI&#xff0c;TCP/IP,五层协议的体系结构&#xff0c;以及各层协议&#xff1a; OSI 分层&#xff1a;7层&#xff0c;物理层&#xff0c;数据链路层&#xff0c;网络层&#xff0c;传输层&#xff0c;会话层&#xff0c;表示层&#xff0c;应用层 TC…

计算机网络实验报告校园网,校园网规划与设计实验报告.docx

校园网规划与设计实验报告校园网的规划与设计实验报告篇一&#xff1a;校园网设计与规划报告(计算机网络大实验)  《计算机网络》实践报告  校园网设计与规划   专 业&#xff1a; 软件工程   班 级&#xff1a; 软件0901  姓 名&#xff1a; 李双双  学 号:  指…

Linux(Ubuntu)下设置开机自启shell脚本执行Java程序jar包

一、建立脚本文件&#xff1a; 二、设置权限 三、将脚本文件放到启动目录下 四、更新优先级 cd /etc/init.d sudo update-rc.d startm.sh defaults 90 至此&#xff0c;开机启动已经完成&#xff0c;我们可以通过reboot重启linux&#xff0c;来查看jar包是否已经启动成功。而…

鼠标键盘与计算机无法连接,只有三个步骤可以轻松解决无法识别计算机,键盘和鼠标的问题!...

对于大多数人来说&#xff0c;无论是笔记本电脑还是台式机&#xff0c;浏览网络&#xff0c;聊天&#xff0c;玩游戏和办公室工作都像进食和喝水一样容易。但是了解计算机并不意味着了解计算机。有时&#xff0c;一个非常常见的小问题“键盘和鼠标无法响应”常常使许多朋友感到…