display:none无transition动画过渡；height:auto的transition动画;

想实现类似bootstrap中collapse的功能。设置过渡动画的时候发现下面两个问题。

    

一、使用display:none和display:block是不会有transition动画效果的。

     目前display属性不受支持。猜想原因是因为缓动是基于数值和时间的计算(长度，百分比，角度，颜色也能转换为数值)。而display是一个尴尬的属性，该计算什么值实现？

    

     解决方案：利用支持的属性如：opacity: 0，height:0 =>opacity:1, height: 400px(一个确定的数值，不能是auto)

                       或者 visibility:hidden => visibility:visible 来达到视觉上的隐藏效果。

            如果目标元素中有链接之类那么推荐用visibility而不是opacity,因为opacity为0时链接仍可以被点击。

二、采用上述方案时，最后的高度不能是height:auto. 可用max-height作为替代

     应该也是height:auto无法计算速度，所以会表现为无动画。

     解决方案：简单的纯css方法是 设置max-height=>max-height:500px(某个大于height的值)

.text{
    opacity: 0;
    height: 0;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 5s;
}
input:checked~.text{
    opacity: 1;
    max-height: 500px;
    height: auto;
    /*height: 200px;*/
    transition:max-height 5s;
}

    缺点：不如使用height完美，展开的时候还好，但合上的时候似乎无动画。

        网上还有利用js方法解决的，是先利用js获取隐藏元素高度，然后再一系列操作，有兴趣可以再学习一下。