CSS3 transition使用max-height收缩时卡顿的原因

最新推荐文章于 2023-07-26 17:24:31 发布
最新推荐文章于 2023-07-26 17:24:31 发布
阅读量1.7k 收藏
点赞数 2
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangwhim/article/details/119879018
版权
本文详细解释了CSS3过渡动画在使用max-height属性时可能出现的卡顿现象。当内容高度未达到max-height设定值时，元素会从较高的max-height开始收缩，导致视觉上的延迟，从而产生卡顿感。了解这一机制有助于优化网页动画效果。

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

CSS3过渡动画transition，使用max-height时会有像卡一下才进行收缩的原因，因为收缩动画是以max-height高度来算的，如果你的实际内容高度没有达到max-height高度，它收缩时是从比实际高度要高的max-height定义的高度的地方开始往下收所以要等高度收到和实际高度差不多时，你才能看见收缩效果，于是给你造成卡一下的感觉。

WangWhim
关注
CSS从入门到精通教程 - 系统学习CSS 技术
YunWisdom
10-10 1916
由浅入深的系统讲解CSS的功能，CSS 体系课程专讲
html div 子元素 过多 卡顿,CSS不定高元素transition动画的解决方案
weixin_35150962的博客
06-25 1289
CSS不定高元素transition动画的解决方案类别： 技术·CSS时间：2019-07-27 23:41:35字数：3297版权所有，未经允许，请勿转载，谢谢合作~### 前言CSS中transition可以方便的实现我们的过渡动画效果，但并不是元素的所有属性都可以过渡，那有哪些元素支持动画呢，这里有个列表：所有支持transition的属性这么多属性估计记不住，可以理解...
transition+max-height动画收回时卡顿问题
qq_32754575的博客
05-20 1314
transition+max-height动画收回时卡顿问题例如解决 例如 .detaile{ max-height: 0; transition: max-height .5s; overflow: hidden; &:hover{ max-height: 1000px; } } 假如内容实际高度只有100px，就回出现卡顿。应该是按照动画时间和max-height差值计算。 解决 max-height和实际高度差不太多就行了。 ...
CSS transition动画卡顿的探究
weixin_45689946的博客
12-27 7009
一、问题 今天在使用css3的transition做动画过渡时，发现动画会卡顿，特此记录我发现卡顿的一些原因和笔记。 先给出结论： 在使用css3 transtion做动画效果时，transform实现的动画是与合成器线程相关的，不需要等待主线程样式计算或者 JS 执行，计算速度是很快的；而使用height，width，margin和padding做动画过渡时，会导致浏览器发生布局和绘制的调整，主线程需要重新计算样式并且执行JS，计算速度自然就慢了。 二、以height为过渡属性时 当一个元素的过渡属性为
解决css内容高度不固定，transition手风琴效果失效的情况（展开收起）
wh20141212的博客
02-07 1255
最近写了一个筛选功能，要使用手风琴效果展开内容，但是高度不固定，故此添加的动画效果失效，对此有两种解决方案 给需要展开/收起的元素（即添加了动画属性transition的元素），添加属性 position: absolute; 计算当前模块元素的高度，有时候计算高度很不方便，但是可以使用一个简单的方法直接获取展开的高度 ...
el-collapse-transition动画卡顿问题
weixin_45332196的博客
07-26 1257
不要给类名为.content的元素设置高度和padding。若要设置高度和padding值，应该给类名为.conent-inner的元素设置，否则展开和收缩的动画可能会出现顿挫。要在v-show/v-if的更下一层元素设置高度或者padding，不要在v-show绑定的层上设置高度和padding。
CSS中过渡效果（transition）
shao_xuan_的博客
10-19 7788
CSS中过渡效果（transition）过渡（无继承性）1、transition-property属性2、transition-duration属性3、transition-timing-function属性4、transition-delay属性5、transition属性兼容性练习总结 过渡（无继承性） CSS3提供了强大的过渡属性，它可以在不使用Flash动画或者JavaScript脚本的情况下，为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。 1、transition-pro
CSS3电子结算单折叠显示特效特效代码
03-20
例如，我们可以设置`height`或`max-height`的过渡效果，当用户点击展开按钮时，结算单的商品列表会以平滑的方式显示出来。 4. **Animation**：更复杂的动画可以通过`@keyframes`规则来创建，这允许我们定义动画的每...
CSS3动画：为Vue-video-player添加动态视觉效果的秘籍
本文旨在介绍Vue-video-player组件与CSS3动画的结合与应用，涵盖组件的基础结构、CSS3动画的理论与实践、设计交互式动画效果以及调试与优化方法。通过分析组件的安装、配置、生命周期、事件监听以及CSS3的关键帧和...
纯CSS3打造高效无JS手风琴特效
1. **性能优化**：虽然CSS动画较轻量级，但在内容较多或很长时，应考虑动画性能，避免出现延迟或卡顿现象。可以通过适当调整`transition`的速度，或使用硬件加速的属性如`transform: translateZ(0);`提升性能。 2. ...
<script setup lang="ts"> import { ref } from &#39;vue&#39; const searchText = ref(&#39;&#39;) const isSearching = ref(false) const results = ref<string[]>([]) const handleSearch = () => { if (!searchText.value) { isSearching.value = false return } else { isSearching.value = true setTimeout(() => { results.value = Array.from({ length: 10 }, (_, i) => `结果 ${i + 1}: ${searchText.value}`) }, 500) } } </script> <template> <div class="container" :class="{ &#39;search-active&#39;: isSearching }"> <div class="search-box"> <input v-model="searchText" type="text" placeholder="输入搜索内容" @keyup.enter="handleSearch"> <button @click="handleSearch"> 搜索 </button> </div> <transition name="list"> <ul v-if="isSearching" class="result-list"> <li v-for="(item, index) in results" :key="index"> {{ item }} </li> </ul> </transition> </div> </template> <style> .container { height: 100vh; display: flex; flex-direction: column; align-items: center; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .container:not(.search-active) { justify-content: center; } .search-active { padding-top: 50px; } .search-box { display: flex; transition: transform 0.3s ease; } input { width: 300px; padding: 12px 20px; border-radius: 25px; font-size: 16px; } button { padding: 12px 25px; background: #42b883; border-radius: 25px; color: white; cursor: pointer; } .result-list { width: 500px; max-height: 60vh; overflow-y: auto; margin-top: 30px; padding: 0; list-style: none; } /* 过渡动画 */ .list-enter-active, .list-leave-active { transition: all 0.5s ease; } .list-enter-from, .list-leave-to { opacity: 0; transform: translateY(-20px); } </style> 现在过度动画很不流畅尤其是搜索框回到初始状态的
最新发布
04-03
综合这些点，可能需要建议用户优化CSS属性，使用硬件加速，调整过渡时间和缓动函数，正确使用transition-group，协调动画顺序，以及利用第三方库和性能分析工具来提升流畅性。</think>### 分步优化方案 #### 一、...
css3针对移动端卡顿问题的解决(动画性能优化)
01-19
一、使用css，jquery，canvas制作动画 1.Canvas 优点：性能好，强大，支持多数浏览器（除了IE6、IE7、IE8），画出来的图形可以直接保存为 .png 或者 .jpg的图形； 缺点：依赖于HTML，只能通过脚本绘制图形，没有实现动画的API（依靠事件和定时器更新）；由于在 canvas 上以编程方式显示的文本其实就是位图，因此搜索爬行器将完全忽略文本。文本内容也无法被屏幕阅读器识别。 2.css3 优点：简单且与内容分离、css动画不触发layout和paint；（这些属性的修改不会触发layout和paint：backface-visibility、opacity、pe
css height为auto的transition过渡效果--max-height
weixin_45533739的博客
04-11 2851
手风琴效果，展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto; 此时设置transition不会产生效果, 原因是 transition 无法将 ()px 变为不是具体数值的 auto 解决方法： 设置max-height，max-height尽可能最大，transition也要设置max-height； 我一开始写的height,一直没有效果。 <div class="motxt" @click.stop="getmorerule()">更多规则&
Vue3 Transition 踩坑记
Immerse的 Blog
04-09 483
系列首发于公众号[『前端进阶圈』]，若不想错过更多精彩内容，请“星标”一下，敬请关注公众号最新消息。Transition组件子元素不能包含注释，这会导致无法通过运行时编译，导致组件不能正确渲染。(我踩了半小时的坑，不要跟我一样)模板编译中，Transition子元素不允许多个组件或元素，否则编译不通过，根据单测源码得知，如果需要多个分支，可以使用来确定具体分支。Transition子元素的组件中可以包含注释，但是不要包含太多，不然会影响渲染效率。希望大家能从我的经验中获得一些收获，避免重复踩坑。
使用 CSS Transition 通过改变 Height 来展开收起元素
lio-zero 的博客
06-04 944
一个常见的开发需要，我们希望折叠元素的一部分，直到需要它为止。一些常见的框架(如 Bootstrap 和 JQuery)提供了转换效果。然而，CSS Transition 在转换高度方面给予了我们很大的灵活性。因此，您不必在项目中加入其他框架。 下面我们看看，如何使用 CSS Transition 设置 height 属性的动画效果以及其存在的问题、解决方案。 你可以在????查看效果 过渡高度 我们要...
不定高元素的高度transition动画实现
weixin_30301449的博客
05-16 1485
分析文档描述 CSS 支持动画的属性中的 height 属性如下： height ：yes, as a length, percentage or calc() 即：当 height 的值是 length，百分比或 calc() 时支持 CSS3 过渡。 所以当元素 height : auto 时，是不支持 CSS3 动画的。 解决办法 一、使用max-height属性代替height实...
关于transition max-height
panling_dml的博客
01-16 1946
今天做项目用到max-height触发动画，是有个二级菜单展开收缩，由于不想计算高度所以用的max-height,然后就发现展开的时候是及时的，但是收缩会等待别的展开后才收，效果不是很好，找不到原因，改为height后是同时进行的，在此记录下...
实现卡片高度增加时的缓动动画效果
HYY的博客
03-29 2228
在开发中，我们可能会遇到需要让卡片高度由内容撑起（即不能手动设置height），并且在高度增加时增加缓动动画的需求。本文将介绍几种实现方式。
css3帧动画无缝衔接会闪一下,CSS3 transition动画的FLIP动画学习，反转动画来解决动画的卡顿，闪烁。...
weixin_29800917的博客
08-04 1735
FLIP动画web前端可谓是个无底洞，永远学不到头，知道的东西越多，就明显感觉到自己不会的越多。细细一数，发现需要学的知识能列出上百条来。只能淡定下来，一个一个的学习。心急吃不了热豆腐，不论是js，还是CSS，都实际工作中应用了三年了，仍然深感掌握的肤浅。今天学习了一个叫FLIP动画的知识，拿出来给大家分享一下。FLIP是几个英文字母的缩写：First ，Last，Invert，Play。并不能算...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值