今天遇到个小问题 大概要实现类似手风琴的效果

本来设计是定死的高度，直接 height:0; - > height:xxxpx;但之后要改成动态变化的高度，手风琴展开后是个列表，并且列表每行高度不固定。

开始设置的height:auto，结果发现 transition 过渡 失效了。

百度了下告知用max-height 虽然说实现了过渡效果但是transition是根据所设置的max-height来进行的，就是说如果max-height为1000px 实际盒子 height:200px ，设置 transition:1s的话实际过渡只有0.2s，并不可控。而且收回时候经常过渡失效（

最后自己的实现方案还是用固定的height来做：

给父元素去设置固定的高度 和 overflow:hidden;以及过渡，然后去拿它的children子元素的offsetHeight之和来作为父元素的高度即可

关于盒子动态高度与transition的问题的更多相关文章

  1. CSS 奇技淫巧：动态高度过渡动画

    这个问题源自于掘金上的一个留言,一个朋友问到,为什么我下面这段代码的高度过渡动画失效了? 伪代码大概是这样: { height: unset; transition: all 0.3s linear; ...

  2. soui中，列表控件动态高度的使用注意

    1.listview的模板template中,需要增加defHeight属性,即默认高度,同时,不能出现itemHeight属性,否则动态高度会失效 2.数据适配器中,重写getViewDesired ...

  3. swift 版本 UItableViewCell的动态高度补足

    用swift的朋友们很多都是从ios8开发了, 其中针对table cell高度自动计算的 UITableViewAutomaticDimension 异常好用,但好像只对uilabel对象有效    ...

  4. css中height 100vh的应用场景，动态高度百分比布局，浏览器视区大小单位

    css中height 100vh的应用场景,动态高度百分比布局,浏览器视区大小单位 height:100vh 一些只能vw, vh才能完成的应用场景: 1. 场景之:元素的尺寸限制 vw vh 主要是 ...

  5. AutoLayout深入浅出五[UITableView动态高度]

    本文转载至 http://grayluo.github.io//WeiFocusIo/autolayout/2015/02/01/autolayout5/ 我们经常会遇到UITableViewCell ...

  6. 使用Autolayout xib实现动态高度的TableViewCell

    http://my.oschina.net/u/2360693/blog/481236?p={{totalPage}} 创建Xib文件 首先将Cell做好布局,调整到满意的位置和宽度,然后开始做Aut ...

  7. iOS开发——使用Autolayout生成动态高度的TableViewCell单元格

    步骤一.TableViewCell中使用Autolayout 要点:Cell的高度必须在Constraints中指明,但不能定死,需要让内部由内容决定高度的View决定动态高度. 如UILabel设置 ...

  8. AutoLayout处理UITableView动态高度

    我们经常会遇到UITableViewCell的高度要跟随内容而调整,在未引入AutoLayout之前,我们使用以下方法计算Label高度,然后heightForRowAtIndexPath中返回计算的 ...

  9. autoHeight # 动态高度添加 用 window.addEventListener('resize', function () {

    动态高度添加 用 window.addEventListener('resize', function () { mounted () { this.init() window.addEventLis ...

  10. IOS开发-cell的动态高度

    tableView中自定义cell的高度随子控件的内容动态变化,也是用的非常多的地方.现在就来处理一个自定义一个里面有文字(多少不定),图片(有无不定)的cell 首先要准备两个模型,一个是存放数据的 ...

随机推荐

  1. CentOS7.X yum安装MySQL8.0 数据表不区分大小写切换默认存储路径

    查看当前系统版本的详细信息 # cat /etc/redhat-release CentOS Linux release 7.9.2009 (Core) yum源下载 地址:https://dev.m ...

  2. cAdvisor容器监控规则

    其他说明参考host主机监控规则:https://www.cnblogs.com/sanduzxcvbnm/p/13589848.html 在prometheus主程序目录下的rules目录下新建do ...

  3. 利用msg_msg实现任意地址读写

    利用msg_msg实现任意地址读写 msgsnd和msgrcv的源码分析 内核通过msgsnd和msgrcv来进行IPC通信.内核消息分为两个部分,一个是消息头msg_msg(0x30),以及后面跟着 ...

  4. 如何通过执行SQL为低代码项目提速？

    见多了SQL为代码开发提速,那么当低代码遇到SQL会擦出怎样的火花呢?本文将低代码和SQL结合进行介绍,让大家了解如何通过执行SQL为低代码项目提速. 背景 自从计算机诞生的一刻起,如何让计算机能够按 ...

  5. [CG从零开始] 4. pyopengl 绘制一个正方形

    在做了 1-3 的基础工作后,我们的开发环境基本 OK 了,我们可以开始尝试利用 pyopengl 来进行绘制了. 本文主要有三个部分 利用 glfw 封装窗口类,并打开窗口: 封装 shader 类 ...

  6. Docker | 部署nginx服务

    容器时相互隔离的,docker启动的nginx是容器内的服务,不影响我原先服务器上的nginx服务,小伙伴们可大胆尝试 本篇实在linux环境下操作的,主要目的是夺人眼目,对使用Docker部署服务尝 ...

  7. MySQL基础、MySQL安装和MariaDB安装

    MySQL基础 目录 MySQL基础 关系型数据库介绍 数据结构模型 RDBMS专业名词 关系型数据库的常见组件 SQL语句 MySQL安装与配置 MySQL安装 MariaDB安装 关系型数据库介绍 ...

  8. 前端枚举enum的应用(Element)封装

    什么是枚举Enum 枚举 Enum是在众多语言中都有的一种数据类型,JavaScript中还没有(TypeScript有).用来表示一些特定类别的常量数据,如性别.学历.方向.账户状态等,项目开发中是 ...

  9. 1.ElasticSearch系列之集群部署

    第一步:安装JDK JDK要求jdk1.8+,不安装也可以,ES自带JDK 第二步:系统配置 2.1 禁用交换区 sudo swapoff -a 2.2 开最大文件数的限制 编辑文件 /etc/sec ...

  10. 关于.Net 7.0 RC gRPC JSON 转码为 Swagger/OpenAPI文档的注意事项

    大家好,我是失业在家,正在找工作的博主Jerry,找工作之余,看到.Net 7.0 RC2发布了,就想测试下.Net 7.0 RC2 gRPC JSON 转码为 Swagger/OpenAPI文档的特 ...