css transition过渡 与 display 冲突问题

问题描述：

当改变元素display属性时，过渡transition将会失效，原因是display 为none时，页面doc流中不会存在该元素，而transition无法在doc流中做到无中生有，transition改变的只是前后两个状态。

解决办法： 

1. 使用 width 或者 height 属性 配合 opacity使用

    // 如果 高度为 auto 这时候transition会失效，可以使用max-height来代替，我这里加上 opacity 目            
    // 的时候为了 内容在展示过程中也会有transition效果
    .viewCollapse{
        // height: auto;
        max-height: 300rpx;
        opacity: 1;
        transition: all 1s;
        -moz-transition: all 1s; /* Firefox 4 */
        -webkit-transition: all 1s; /* Safari 和 Chrome */
        -o-transition: all 1s; /* Opera */
    }
    .viewShrink{
        // height: 0;
        max-height: 0;
        opacity: 0;
    }

2. 可用 visibility 属性

// 不过使用visibility 在内容的展示过程中 不会有transition效果，有时候会造成 动画还未执行完成，内容就已经全部展示了
.viewCollapse{
	max-height: 300rpx;
	visibility: visible;
	transition: all 1s;
	-moz-transition: all 1s; /* Firefox 4 */
	-webkit-transition: all 1s; /* Safari 和 Chrome */
	-o-transition: all 1s; /* Opera */
}
.viewShrink{
	max-height: 0;
	visibility: hidden;
}