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

本来设计是定死的高度，直接 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. Elasticsearch Top10 监控指标

    文章转载自: https://mp.weixin.qq.com/s?__biz=MzI2NDY1MTA3OQ==&mid=2247484441&idx=1&sn=8292f50 ...

  2. Secret概述

    Secret 概述 Kubernetes Secret 对象可以用来储存敏感信息,例如:密码.OAuth token.ssh 密钥等.如果不使用 Secret,此类信息可能被放置在 Pod 定义中或者 ...

  3. 通过开启swap分区来解决小内存阿里云服务器的内存瓶颈

    swap分区大小设置 阿里云的linux云服务器默认是没有启用swap分区(交换分区)的.一般情况下swapswap分区的大小可以参考以下规则进行设定: 内存大小 swap大小 MEM_SIZE &l ...

  4. EasyExcel实现文件导出

    官网:https://www.yuque.com/easyexcel/doc/easyexcel 导出 准备工作 引入依赖 <!--EasyExcel相关依赖--> <depende ...

  5. PAT (Basic Level) Practice 1005 继续(3n+1)猜想 分数 25

    卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程中遇到的每一个数.例如对 n=3 进行验证的时 ...

  6. 第一周python作业

    print("hello world") height=float(input("请输入你的身高:")) weight=float(input("请输 ...

  7. ofd格式文件转换成pdf格式的方法

    ofd格式文件很多人还比较陌生,很多人接收到文件都不知如何打开阅读,把文件发给对方,还需要对方安装个专门的阅读软件,我们还有另一个办法,就是将OFD文件转换为PDF格式文件,然后把PDF格式文件发给对 ...

  8. HTML5中新增实用的标签

    1:progress  进度条 <h3>progress</h3> <progress value="75" max="100"& ...

  9. java.lang.ClassNotFoundException: Cannot find class: “com.mysql.jdbc.Driver“的报错问题

    @Testpublic void testConnectionTest5() throws Exception { //1.读取配置文件,获取4个基本信息 InputStream is = Conne ...

  10. paddle&蜜度 文本智能较对大赛经验分享（17/685)

    引言 我之前参加了一个中文文本智能校对大赛,拿了17名,虽然没什么奖金但好歹也是自己solo拿的第一个比较好的名次吧,期间也学到了一些BERT应用的新视角和新的预训练方法,感觉还挺有趣的,所以在这里记 ...