关于webkit-transition CSS过渡不适用于百分比高度

今天在优化7B2文章目录模块时候想隐藏掉用户展示小模块，先给模块新增了transform属性，当滚动时候高度设置为0。整完发现动画没起作用，网上搜了搜才发现，原来transform不支持百分比属性。如何解决且看下文

transform属性是什么

CSS3中新增的transform属性，可以实现元素在变换过程中的过渡效果，实现了基本的css动画。
transition动画
功能：实现元素不同状态之间的平滑过渡。
此前：元素->hover状态 直接切换，从开始状态到结束状态，瞬间完成，中间过程几乎无法查看。
格式：
transition：过渡的属性 完成时间（s） 运动曲线 延迟时间

数值型的属性才可以设置过渡。
width,height,color,font-size

transition-property 过渡属性：发生变化时，想要有过渡效果的属性设置全属性all。
transition-duration 完成时间：单位是s/ms。
transition-timing-function 运动曲线：

linear: 表示匀速过渡；
ease: 默认值，表示过渡的速度先慢，再快，最后非常慢；
ease-in: 表示过渡的速度先慢，后越来越快，直至结束；
ease-out: 表示过渡的速度先快，后越来越慢，直至结束；
ease-in-out: 表示过渡的速度在开始和结束时都很慢；
cubic-bezier(n,n,n,n): 自定义贝塞尔曲线的效果，其中的四个参数为从0到1的数字。transition-delay 延迟时间：单位是s 默认为0 过渡多久后生效。 从结束状态返回到开始状态时，也会生效。

示例代码：

.detailsCollapsed
{
   display:none;
   height:0%;
   width:100%;
   -webkit-transition:height 40s ease-in-out;
}

.detailsExpanded
{
    display:block;
    visibility:visible;
    height:100%;
    width:100%;
    -webkit-transition:height 40s ease-in-out;
}

transition height的属性

CSS 支持动画的属性中的 height 属性如下：
height ：yes, as a length, percentage or calc()
即：当 height 的值是 length，百分比或 calc() 时支持 CSS3 过渡。
所以当元素 height : auto 时，是不支持 CSS3 动画的。
由此可见高度可以设置为百分比，但是前提是要有对比值，如果没有设置高度值，且点击或者新增class后突然设置高度为0，并不会产生动画。也或者一个百分比值，一个0.也是不行的。

解决方案

在常见的开发中很多时候并不会设置模块DIV高度，但是我们可以用max-height来作为初始值。经过用户交互，点击事件新增class或者添加伪类属性后，改变这个高度。当然如果你JS扎实也可以用JS解决。

示例代码：

    div{
  max-height: 0;
  transition: max-height .5s;
}
div:hover{
  max-height: 200px;
}