height为auto，展开时，transition失效的解决方案

最新推荐文章于 2023-07-03 15:20:50 发布
最新推荐文章于 2023-07-03 15:20:50 发布
阅读量1.4k 收藏
点赞数
文章标签： css html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_16189233/article/details/121654892
版权
本文探讨了三种CSS布局中高度控制的解决方案。当展开高度影响其他元素时，可以使用max-height属性设置具体值；若不影响布局，可采用绝对定位并配合max-height；而在未知高度情况下，利用JavaScript动态获取并设置高度。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

分为三种情况

  1. 知道展开的最大高度，并且展开区域影响其他元素布局
    解决方案：设置max-height为具体数值，百分比，px均可

  2. 知道展开的最大高度，并且展开区域不影响其他元素布局
    解决方案：设置position为absolute，并且max-height为具体数值，百分比，px均可

  3. 不知道展开的最大高度
    解决方案：借助js，获取展开后的高度，再设置高度

几蓝色
关注
女朋友要我教她CSS，我就写了这一篇长文，感动哭了？
超逸の学习技术博客
05-30 9871
女朋友她又要我教她CSS，这4w字长文够了吗？她会被感动到吗？
height: auto; 会使transition失效
dfQ_Qjb的博客
01-16 2513
height: auto; 会使transition失效
Transition height from 0 to auto
果果的小窝
09-08 1931
CSS3的transition可以作用于大部分属性值为数值之类的属性，包括width、height、font-size、color、opacity等。但是将transition应用于 height:auto;时 ，浏览器会识别height值为0，因此无法直接从 height: 0; 过渡到 height: auto; 。 一种简单的方法是，将过渡应用于max-height属性，通
height:auto 时 transition动画失效
风小猪的博客
04-12 1354
必须设置height为一个具体值时transition动画才会生效，但是ul-wrapper中的数据需要动态渲染，并不知道展开后的准确高度！通过套一个父盒子，并在父盒子上设置max-height来实现transition动画，展开后的高度通过js动态获取。点击收起时ul-wrapper高度设置为100px，展开时高度设置为auto，同时设置展开，收起的动画transition: all 3s;此时，由于ul-wrapper-parent展开，收起时的max-height都是具体值，展开动画生效。
设置 height: auto 却无法触发 transition 动画的解决方案
YopenLang的博客
08-01 4204
当 `height: auto` 时，设置 `transition` 是无法触发动画的，CSS 需要知道具体的 height 值，因此引申其他解决方案： - 方案一：使用 `transform` 的 `scaleY`，去放大缩小。 - 缺点 - 内容会变形 - 会占据原来的内容尺寸 - 方案二：设置 `max-height` - 缺点 - 随着内容的增加，需要重新考虑设置 `max-height` 的值 - `transition-timing` 是作用在 `max-height` 上
手动实现折叠面板效果，height:auto时，导致transition失效
alisa_csdn的博客
11-29 1419
height：auto，transition没有生效 2.此时，我们可以设置一个最大高度，max-height（超过你的内容高度的一个值，我这边设置为214px），此时我们发现展开已生效，但关闭的折叠效果没有生效 3.我们可以设置一个最小高度，min-height，这样折叠面板的功能就实现了，一起试试吧 ...
height高度为auto的transition过渡无效解决
MELANCHOLY ❤ ◁ ❚❚ ▷
05-11 2435
height有一方是auto则无效,动态获取变化后 <div class="concept-analysis" > <a-card size="small" class="at-card" v-for="(item,index) in testData" :key="index" @click="openCard(index)" :style="{height:cardFlag===index ? groupAutoHeight :'388px'}"> </a-ca
如何让height:auto实现transition过渡效果
亱語的博客
04-06 4971
如何让height:auto实现transition过渡效果
浏览器兼容性问题及解决方案大汇总
qq_51179053的博客
07-03 3459
所谓浏览器兼容性问题：是指不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的效果。解决方法前端开发疆场需要检查浏览器的兼容性，这里推荐（Can I Use）这个查询网址。是一个针对前端开发人员制定的一个查询CSS、JS、HTML5、SVG，可以很好的保证网页在浏览器中的兼容性。CSS兼容问题1、不同浏览器的标签默认的内外边框不同。解决方案 {margin:0;padding:0}/** * 该文件用于清除浏览器样式 */ html, body, div, span, applet, objec
动态面板跨平台兼容性解决方案：10个策略，让应用无缝对接
[动态面板跨平台兼容性解决方案：10个策略，让应用无缝对接](https://lilacinfotech.com/lilac_assets/images/blog/Why-Google-Flutter.jpg) # 摘要 随着多设备使用环境的普及，跨平台动态面板的设计与实现成为了...
cover-view样式失效
最新发布
04-01
height: auto; /* 自动适应内容高度 */ } ``` --- #### 5. **全屏模式下的特殊处理** 在涉及媒体播放器（如 `<video>` 组件）进入全屏状态时，`cover-view` 的功能可能会受到限制，表现为交互失灵或视觉错乱等...
CSS如何设置高度为屏幕高度_面试题联盟之CSS篇
weixin_39948111的博客
11-22 1923
关注入坑互联网，回复“加群”加入我们一起学习，天天进步1、CSS3的新特性实现圆角(border-radius)阴影(box-shadow)文字加特效(text-shadow)线性渐变(gradient)旋转(transform)媒体查询，多栏布局2、CSS中 link 和@import 的区别link属于HTML标签，而@import是CSS提供的;页面被加载的时，link会同时被...
解决css内容高度不固定，transition手风琴效果失效的情况（展开收起）
wh20141212的博客
02-07 1264
最近写了一个筛选功能，要使用手风琴效果展开内容，但是高度不固定，故此添加的动画效果失效，对此有两种解决方案 给需要展开/收起的元素（即添加了动画属性transition的元素），添加属性 position: absolute; 计算当前模块元素的高度，有时候计算高度很不方便，但是可以使用一个简单的方法直接获取展开的高度 ...
css height:auto 不起作用,css height:auto 不起作用怎么办
weixin_35353583的博客
08-04 1122
css height:auto不起作用的解决办法：1、利用chrome查找被覆盖属性的父级css属性，并删除；2、将父元素加上“zoom:1;overflow:hidden;”语句即可。本教程操作环境：windows7系统、Chrome76.0&&CSS3版本，Dell G3电脑。相关推荐：《css视频教程》css height:auto不起作用怎么解决？可能因为父元素处于浮动状态...
vue中元素高度auto的收起展开动画
sdfujichao的博客
04-10 7083
<!-- **** 说明： **** 使用css3的transition动画来做 **** 但是这个属性只能用于固定高度的元素，所有在进行动画之前就要手动的给这个元素设置一个高度值，这样就能正常使用动画了 **** **** --> <template> <div> <button @click="fun_animate"...
css动画height为auto无法触发transition
A13330069275的博客
10-23 3633
使用max-height属性来进行代替（有一定缺陷） 原理:通过一个过大的maxHeight来渐变 这里是vue的style写法 :style="{height: groupExpandFlag ? 'auto': '60px', maxHeight: groupExpandFlag ? '500px': '60px', transition: 'max-height .3s ease-i...
CSS中height：auto 属性无效
vuvivian的博客
06-29 8638
height:auto 属性无效的处理方法
css height为auto的transition过渡效果--max-height
weixin_45533739的博客
04-11 2863
手风琴效果，展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto; 此时设置transition不会产生效果, 原因是 transition 无法将 ()px 变为不是具体数值的 auto 解决方法： 设置max-height，max-height尽可能最大，transition也要设置max-height； 我一开始写的height,一直没有效果。 <div class="motxt" @click.stop="getmorerule()">更多规则&
如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画
a949199259的博客
06-23 484
但一个元素不设置height时，它的默认值是 auto，浏览器会计算出实际的高度。 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时，该怎么办呢？ 从 MDN的可以查到CSS 支持动画的属性中的 height 属性如下： height：yes, as alength,percentageor calc(); // 当 height 的值是 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值