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

本来设计是定死的高度，直接 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安装常用软件的yaml文件

    参考网址:https://www.bejson.com (网站文件部分有坑,需要擦亮眼睛) nginx k8s版本:v1.20 apiVersion: apps/v1 kind: Deployment ...

  2. Fluentd采集示例

    Fluentd通过读取配置文件来加载各插件,日志经由各插件的处理完成输入到输出的整个路由. 本文通过一个最简单的示例来说明配置文件的结构.td-agent.conf默认位于/etc/td-agent/ ...

  3. Java调用C++动态链接库——Jni

    最近项目需要,将C++的算法工程编译成动态链接库,交给 Java后台当作函数库调用.就去了解了下Jni.使用起来还是比较方便的. 1.  首先编写Java的调用类.例如:    public clas ...

  4. UDP协议编程

    #接收代码 import socket # 使用IPV4协议,使用UDP协议传输数据 s=socket.socket(socket.AF_INET, socket.SOCK_DGRAM) # 绑定端口 ...

  5. 使Squashfs可写的办法

    yiyi@yiyi-HP-Pavilion-Notebook:~/Applications/Office2016$ pwd /home/yiyi/Applications/Office2016 yiy ...

  6. docket打包镜像内部报错

    临时记录,后面再完善 对于前端docker一般不太熟悉,当我们想要打包镜像的时候会去找教程,我按着教程去打包一个使用KOA框架搭建的node服务. 这是一个 koa + ts + pm2的项目 结果出 ...

  7. P3008 [USACO11JAN]Roads and Planes G （最短路+拓扑排序）

    该最短路可不同于平时简单的最短路模板. 这道题一看就知道用SPFA,但是众所周知,USACO要卡spfa,所以要用更快的算法. 单向边不构成环,双向边都是非负的,所以可以将图分成若干个连通块(内部只有 ...

  8. POJ3398 Perfect Service （树形DP）

    对于每个u要设置三维. dp[u][0]表示u是服务器,以u为根的最小服务器数,其子节点既可以是,也可以不是,dp[u][0]+=min(d[v][0],d[v][1]); dp[u][1]表示u不是 ...

  9. 一文讲清楚 JVM Safe Point

    大家好,我是树哥. 关于 Safe Point 是 JVM 中很关键的一个概念,但我估计有不少同学不是很懂.于是今天跟大家来深入聊聊 Safe Point,希望通过这篇文章能解答这样几个问题: 什么是 ...

  10. C++ 使用栈求解中缀、后缀表达式的值

    1. 前言 表达式求值对于有知识积累的你而言,可以通过认知,按运算符的优先级进行先后运算. 但对计算机而言,表达式仅是一串普通的信息而已,需要通过编码的方式告诉计算机运算法则,这个过程中栈起到了至关重 ...