【CSS3 transition】解决元素高度不固定时，设置transition不生效的问题

最新推荐文章于 2024-04-25 13:51:03 发布
最新推荐文章于 2024-04-25 13:51:03 发布
阅读量1.3w 收藏 6
点赞数 1
分类专栏： web端 文章标签： transition 高度不固定
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_21228539/article/details/80942058
版权

假设一个DIV要实现手风琴效果，展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto;

此时设置transition不会产生效果

原因是 transition 无法将 ()px 变为不是具体数值的 auto

解决方法：

在两种状态下分别设置max-height，且自适应高度状态下时max-height设置为不可能超过的数值

Percy_XZQ
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
CSS3 transition失效问题及宽高不确定时如何设置transition属性
叹之
12-04 4966
关于transition，css教程中有一个很简单的例子: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .a { transition: opacity .5s;
css transtion不生效_CSS中transition属性不起作用的原因及解决方法
weixin_34086545的博客
12-24 3318
CSS中的transition属性可用于调整元素更改的时间，它可以像动画一样显示。虽然transition属性可以很方便的实现过渡效果，但是有时候可能会出现无效的情况，所以我们就需要来理解transition属性的写法规则。我们先来看一下CSS中transition属性不起作用的原因transition是一种允许您指定更改时间等的属性。当用于设置鼠标光标放在按钮上时颜色和大小更改的时间时，它可以有...
height高度为auto的transition过渡无效解决
MELANCHOLY ❤ ◁ ❚❚ ▷
05-11 2238
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 动画的解决方案
YopenLang的博客
08-01 3483
当 `height: auto` 时，设置 `transition` 是无法触发动画的，CSS 需要知道具体的 height 值，因此引申其他解决方案： - 方案一：使用 `transform` 的 `scaleY`，去放大缩小。 - 缺点 - 内容会变形 - 会占据原来的内容尺寸 - 方案二：设置 `max-height` - 缺点 - 随着内容的增加，需要重新考虑设置 `max-height` 的值 - `transition-timing` 是作用在 `max-height` 上
transition包裹多元素使用时，不生效
最新发布
luzhiqiu的博客
04-25 148
【代码】transition包裹多元素使用时，不生效。
transition不生效
weixin_66892551的博客
05-11 1472
原因1:该元素具有display:none的属性,transition无法对从无到有的属性生效。方案:用visibility:hidden和visibility:visible代替。比如height:fit-content。原因2:该元素过渡的属性没有确定的值。方案:使用max-height替代。
css：高度不确定时候的transition问题
胡世林的博客
07-01 1万+
前提资料 MDN中关于transition的介绍 先决条件 在页面需要展示过渡效果时候，很多情况我们会使用transition，而用transition做效果时候，很多情况是跟width/height做搭配的； 但是transition有需要两个必要条件，一个是起点：如开始过渡效果的高度。以及过渡效果结束后的高度。速度等其他非必须的不在本文的讨论范围内，暂时忽略 问题描述 鉴于上述条...
height:auto 时 transition动画失效
风小猪的博客
04-12 782
必须设置height为一个具体值时transition动画才会生效，但是ul-wrapper中的数据需要动态渲染，并不知道展开后的准确高度！通过套一个父盒子，并在父盒子上设置max-height来实现transition动画，展开后的高度通过js动态获取。点击收起时ul-wrapper高度设置为100px，展开时高度设置为auto，同时设置展开，收起的动画transition: all 3s;此时，由于ul-wrapper-parent展开，收起时的max-height都是具体值，展开动画生效。
CSS transition属性不生效，没有效果
热门推荐
Lanhaorena的博客
05-04 1万+
CSS transition属性不生效，没有效果1、不生效2、生效3、效果展示 最近在学HTML+CSS，今天开始做第一个项目，其中需要实现图片缓慢平移的效果，老师教我们用transition来实现，但是我自己编写的时候，发现transition并没有效果。研究一番之后发现，需要给属性添加一个初值才能够激发属性transition。 1、不生效 .header .logo a{ position...
解决css内容高度不固定，transition手风琴效果失效的情况（展开收起）
wh20141212的博客
02-07 1064
最近写了一个筛选功能，要使用手风琴效果展开内容，但是高度不固定，故此添加的动画效果失效，对此有两种解决方案 给需要展开/收起的元素（即添加了动画属性transition的元素），添加属性 position: absolute; 计算当前模块元素的高度，有时候计算高度很不方便，但是可以使用一个简单的方法直接获取展开的高度 ...
CSS3中的Transition过度与Animation动画属性使用要点
12-13
Transition（过度）Transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值，它的语法如下： CSS Code复制...
关于vue状态过渡transition不起作用的原因解决
01-19
总所周知，vue中的transition标签可以方便得进行动画过渡，使用的方法也很简单。 <transition name=你要的名字> 过渡的元素... </transition> 这里需要主要一点的是：过渡的元素只能是以下之一： 条件渲染 (使用...
CSS3之transition实现下划线的示例代码
09-24
在CSS3中，`transition`属性是一个强大的工具，它允许我们平滑地过渡元素的样式属性，而不是立即改变。在本文中，我们将深入探讨如何使用`transition`来实现下划线动画效果，以及与之相关的其他CSS3特性。 首先，`...
CSS3中Transition动画属性用法详解
09-24
CSS3中的Transition动画属性是网页设计中用于创建平滑过渡效果的关键工具，它允许CSS属性值在一段时间内平滑地变化，而不是立即跳跃到新值。这个特性在响应用户交互时，如点击、悬停或者页面加载时，能提供更加流畅...
css3 transition按钮动画特效.zip
11-16
首先，CSS3的`transition`属性是实现平滑过渡的关键。它允许我们在元素状态改变时，如:hover、:active或通过JavaScript改变样式时，优雅地过渡到新样式。基本语法如下： ```css element { transition: property ...
手动实现折叠面板效果，height:auto时，导致transition失效
alisa_csdn的博客
11-29 1256
height：auto，transition没有生效 2.此时，我们可以设置一个最大高度，max-height（超过你的内容高度的一个值，我这边设置为214px），此时我们发现展开已生效，但关闭的折叠效果没有生效 3.我们可以设置一个最小高度，min-height，这样折叠面板的功能就实现了，一起试试吧 ...
利用CSS3和JS制作一个自适应高度，带有动画的二级菜单.
qq_51769350的博客
11-18 1408
说明： 如果我们直接使用CSS3中的transition属性来做的话，会有一个问题。那就是我们必须规定每个二级菜单的高度，这样才能有过渡效果。但是，很多时候我们二级菜单里面的每个子项是不确定的，所以不能将高度规定死。 既然不能规定死，那么就得利用js来动态的计算二级菜单每个子项的高度了。 代码： 首先是HTML和CSS部分： <nav class="nav"> <ul class="clearfix"> <li...
css动画height为auto无法触发transition
A13330069275的博客
10-23 3519
使用max-height属性来进行代替（有一定缺陷） 原理:通过一个过大的maxHeight来渐变 这里是vue的style写法 :style="{height: groupExpandFlag ? 'auto': '60px', maxHeight: groupExpandFlag ? '500px': '60px', transition: 'max-height .3s ease-i...
【网页开发】css关于网页端transform的scale()缩放白边问题
小卓仗剑走天涯的博客
01-19 4515
css关于网页端transform的scale()缩放白边问题
css使用transition设置width变化不生效
07-29
你好！对于CSS中使用transition来设置width变化不生效的问题，可能有以下几个原因： 1. 没有设置初始宽度：transition需要有一个初始状态和一个结束状态来进行过渡动画。如果你没有为元素设置初始宽度，那么它就无法过渡到指定的宽度。请确保在应用transition之前，为元素设置了初始宽度。 2. 使用了不支持过渡的属性：请确保你正在使用支持过渡的属性来进行宽度的变化。在CSS中，只有一些特定的属性可以进行过渡，如width、height、opacity等。如果你使用了不支持过渡的属性，那么transition是不会生效的。 3. 设置了无效的过渡时间或过渡函数：检查一下你设置的transition属性中的过渡时间和过渡函数是否正确。过渡时间应该是一个合法的时间值，如1s、500ms等。过渡函数可以是linear、ease-in、ease-out等。如果你在这些属性上有任何错误或拼写问题，那么过渡效果可能无法正常工作。 4. 元素不可见或不可见性变化导致：如果你的元素在transition期间是不可见的，或者它的可见性发生了变化（如从display:none到display:block），那么transition也是不会生效的。请确保元素在过渡期间是可见的，并且不要改变它的可见性。 希望这些解决方法能够帮到你！如果你还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值