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

本来设计是定死的高度，直接 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. 通过nginx转发rabbitmq访问手动添加队列的时候报错：Management API returned status code 405

    原因: 正常访问该地址:https://xxx.xxx.com/rabbitmq/ 时能正常跳转,但是 rabbitmq management 的 API url 出现了 %2f 字符,这些字符会在经 ...

  2. Ubuntu20.04和Docker环境下安装Redash中文版

    创建Ubunt20.04虚拟机,请参考:https://www.linuxidc.com/Linux/2020-03/162547.htm 一.安装基础环境: # 1.更换APT国内源 sudo se ...

  3. Kibana：如何周期性地为 Dashboard 生成 PDF Report

    转载自:https://blog.csdn.net/UbuntuTouch/article/details/108449775 按照上面的方式填写.记得把之前的 URL 拷贝到 webhook 下的 ...

  4. 某宝抢购taobaosnap开发与实现

    某宝抢购脚本 Taobaosnap Taobaosnap is a completely open tool, which is used to buy goods in seconds on Tao ...

  5. Elasticsearch from/size-浅分页查询-深分页 scroll-深分页search_after深度查询区别使用及应用场景

    Elasticsearch调研深度查询 1.from/size 浅分页查询 一般的分页需求我们可以使用from和size的方式实现,但是这种的分页方式在深分页的场景下应该是避免使用的.深分页的页次增加 ...

  6. 驱动开发：通过ReadFile与内核层通信

    驱动与应用程序的通信是非常有必要的,内核中执行代码后需要将其动态显示给应用层,但驱动程序与应用层毕竟不在一个地址空间内,为了实现内核与应用层数据交互则必须有通信的方法,微软为我们提供了三种通信方式,如 ...

  7. XSS-Game

    很简单的弹窗 http://192.168.31.177/xssgame/level1.php?name=<script>alert(1)</script> 过滤了>.& ...

  8. MySQL的日志文件

    本文将重点介绍MySQL的日志文件类型,并讲解其作用,并结合一定实操演示,相信跟着做下来你会对MySQL有更深的理解. 文件的概念 在开始讲MySQL日志文件之前,首先我们要明确一下文件的概念.MyS ...

  9. flutter系列之:flutter中可以建索引的栈布局IndexedStack

    目录 简介 IndexedStack简介 IndexedStack的使用 总结 简介 之前我们介绍了一个flutter的栈结构的layout组件叫做Stack,通过Stack我们可以将一些widget ...

  10. Chrony时间同步服务

    概:  网络时间协议(Network Time Protocol,NTP)是用于网络时间同步的协议.提供NTP时间同步服务的软件有很多,这里采用Chrony软件来实现时间同步 chrony 的优势:  ...