手动实现折叠面板效果，height:auto时，导致transition失效

最新推荐文章于 2023-04-12 22:05:23 发布
最新推荐文章于 2023-04-12 22:05:23 发布
阅读量1.2k 收藏 2
点赞数 1
文章标签： css3 html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/alisa_csdn/article/details/121609102
版权

1.当我们希望实现折叠区域 根据内容的高度 自动撑开时，设置height：auto，transition动效没有生效（当把高度修改为固定值时是可以的）

2.此时，我们可以设置一个最大高度，max-height（超过你的内容高度的一个值，我这边设置为214px），此时我们发现展开已生效，但关闭的折叠效果没有生效

 3.我们可以设置一个最小高度，min-height，这样折叠面板的功能就实现了，一起试试吧

alisa_csdn
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-auto-height:动画的高度
05-05
一个对height: auto进行动画处理的React组件height: auto使用CSS过渡，在更改其子元素的内容时height: auto为其子元素。 浏览器不支持从高度和宽度到auto值的转换，请参阅W3C问题进行讨论。 该组件实现了一个受...
利用transition实现文字上下抖动的效果
08-31
本文将详细介绍如何使用CSS3的`transition`属性和JavaScript来实现这样的效果。 首先，我们要理解`transition`属性的作用。`transition`主要用于平滑地过渡一个CSS属性的改变，它可以让元素在修改样式时有一个渐变...
height:auto 时 transition动画失效
风小猪的博客
04-12 775
必须设置height为一个具体值时transition动画才会生效，但是ul-wrapper中的数据需要动态渲染，并不知道展开后的准确高度！通过套一个父盒子，并在父盒子上设置max-height来实现transition动画，展开后的高度通过js动态获取。点击收起时ul-wrapper高度设置为100px，展开时高度设置为auto，同时设置展开，收起的动画transition: all 3s;此时，由于ul-wrapper-parent展开，收起时的max-height都是具体值，展开动画生效。
【CSS3 transition】解决元素高度不固定时，设置transition不生效的问题
Kaleidoscope
09-13 1万+
假设一个DIV要实现手风琴效果，展开时根据内容自适应高度即从height: ()px; 变化到 height: auto; 此时设置transition不会产生效果 原因是 transition 无法将 ()px 变为不是具体数值的 auto 解决方法： 在两种状态下分别设置max-height，且自适应高度状态下时max-height设置为不可能超过的数值...
height高度为auto的transition过渡无效解决
MELANCHOLY ❤ ◁ ❚❚ ▷
05-11 2227
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
基于vue手动实现折叠面板（展开一项，其他项收起）
无知者无畏
10-22 4932
<template> <div class="report"> <ul class="years"> <li class="years_item" v-for="(item, index) in menuList" :key="item.name"> <div class="title" @click="showToggle(item, index)"> <span>{{ it
height为auto，展开时，transition失效的解决方案
qq_16189233的博客
12-01 1317
分为三种情况 知道展开的最大高度，并且展开区域影响其他元素布局 解决方案：设置max-height为具体数值，百分比，px均可 知道展开的最大高度，并且展开区域不影响其他元素布局 解决方案：设置position为absolute，并且max-height为具体数值，百分比，px均可 不知道展开的最大高度 解决方案：借助js，获取展开后的高度，再设置高度 ...
height: auto; 会使transition失效
dfQ_Qjb的博客
01-16 2439
height: auto; 会使transition失效
利用CSS3的transition属性实现滑动效果
01-21
首先援引一下w3school上的transition基本知识： 定义和用法transition 属性是一个简写属性，用于设置四个过渡... transition: property duration timing-function delay;  实现滑动效果只需要一个DIV元素便可实现
CSS3使用transition属性实现过渡效果
09-24
CSS3的transition属性是实现元素动态过渡效果的关键工具，它使得样式变化能够平滑地进行，而不是突然跳变。在CSS3中，transition属性由四个子属性构成，分别是transition-property、transition-duration、transition...
transition:轮播效果
07-12
例如，我们可以设置`transition: opacity 0.5s ease;`来让元素的不透明度在0.5秒内平滑变化。 3. **变换属性（transform property）**：`transform`用于在元素上应用2D或3D转换，如旋转、缩放、移动。在轮播中，...
transition第一次不生效
见贤思齐焉，见不贤内自省
02-18 738
beacuse 没有给过渡属性加初始值。
设置 height: auto 却无法触发 transition 动画的解决方案
YopenLang的博客
08-01 3457
当 `height: auto` 时，设置 `transition` 是无法触发动画的，CSS 需要知道具体的 height 值，因此引申其他解决方案： - 方案一：使用 `transform` 的 `scaleY`，去放大缩小。 - 缺点 - 内容会变形 - 会占据原来的内容尺寸 - 方案二：设置 `max-height` - 缺点 - 随着内容的增加，需要重新考虑设置 `max-height` 的值 - `transition-timing` 是作用在 `max-height` 上
transition动画过渡没作用（无效）
weixin_45689946的博客
10-27 1万+
transition无效的原因 1、只给该元素赋予了过渡属性的结束值，并未在过渡前定义初始值。 css .header { position: relative; width: 200px; height: 50px; background: red; transition: all 0.3s ease-in-out; } .showMenu.layui-layout-admin .header{ left:-200px; } js $(".moveHandle").click(functio
css：高度不确定时候的transition问题
胡世林的博客
07-01 9997
前提资料 MDN中关于transition的介绍 先决条件 在页面需要展示过渡效果时候，很多情况我们会使用transition，而用transition做效果时候，很多情况是跟width/height做搭配的； 但是transition有需要两个必要条件，一个是起点：如开始过渡效果的高度。以及过渡效果结束后的高度。速度等其他非必须的不在本文的讨论范围内，暂时忽略 问题描述 鉴于上述条...
CSS transition属性不生效，没有效果
Lanhaorena的博客
05-04 1万+
CSS transition属性不生效，没有效果1、不生效2、生效3、效果展示 最近在学HTML+CSS，今天开始做第一个项目，其中需要实现图片缓慢平移的效果，老师教我们用transition来实现，但是我自己编写的时候，发现transition并没有效果。研究一番之后发现，需要给属性添加一个初值才能够激发属性transition。 1、不生效 .header .logo a{ position...
css 过渡transition属性无效
热门推荐
qq_38966984的博客
08-09 2万+
     
html中使用百分比表示height时不生效
小糊涂仙
06-09 2103
已经不是第一次遇见这个问题了，上次遇见这个类似的问题都已经是好久以前了，这次又遇见； 解决方法：在CSS中添加如下代码即可 body, html{ width: 100%; height: 100%; } ...
html右边折叠面板,2017IFE-使用CSS实现折叠面板
最新发布
05-13
折叠面板是一个常见的 UI 组件，可以在 Web 页面上实现内容的展开与收缩。以下是一个 HTML 右边折叠面板的实现示例： HTML 代码： ```html 折叠面板标题 <span class="panel-arrow"></span> 折叠面板...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值