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

本来设计是定死的高度，直接 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. k8s日志架构和基本日志

    如果一个容器崩溃了.一个Pod被驱逐了.或者一个节点停机了,您通常仍然需要访问您应用程序的日志.为此,您需要一个生命周期与节点.Pod.容器相对独立的存储空间来存储应用程序日志和系统日志. 此时,我们 ...

  2. H5调用微信支付

    这里用的是 vue项目; 首先在mounted中判断是否有openId,如果没有,则去获取 let openid = localStorage.getItem('openid'); if (!open ...

  3. 实验02_Proteus仿真数码管显示报告

    一.原理总结   利用两个寄存器 R4 和 R5 来存储两个数码管的显示数字,R4 用来存储前一个数码管显示数字,而 R5 用来存储后一个数码管显示数字,利用左移操作 RLC 取 A 中首位放入 C ...

  4. golang channel底层结构和实现

    一.介绍 Golang 设计模式: 不要通过共享内存来通信,而要通过通信实现内存共享 channel是基于通信顺序模型(communication sequential processes, CSP) ...

  5. P1600 [NOIP2016 提高组] 天天爱跑步 （树上差分）

    对于一条路径,s-t,位于该路径上的观察员能观察到运动员当且仅当以下两种情况成立:(d[ ]表示节点深度) 1.观察员x在s-lca(s,t)上时,满足d[s]=d[x]+w[x]就能观察到,所以我们 ...

  6. 在开发中关于javaweb中的路径问题小结

    转自http://blog.csdn.net/yinyuehepijiu/article/details/9136117 在javaweb项目中添加配置文件,满足连接数据库配置参数以及其他自定义参数存 ...

  7. 分布式存储系统之Ceph集群RadosGW基础使用

    前文我们了解了MDS扩展相关话题,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/16759585.html:今天我们来聊一聊RadosGW的基础使用相关话题: ...

  8. 微光互联 TX800-U 扫码器无法输出中文到光标的问题

    问题背景 某检测场有一批扫码器,购于微光互联,型号 TX800-U,用于在不同办理窗口间扫描纸质材料上的二维码,简化录入过程.扫码器通过 USB 接入 PC 系统 (windows),自动安装驱动,接 ...

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

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

  10. 4.httprunner-参数化和数据驱动

    前言 参数化在config中使用parameters关键字 httprunner2.x 是在testsuite中实现参数化 httprunner3.x 是在testcase中的config实现参数化 ...