因为某些原因，css不能在display:none和display:block之间进行动画，并且也不能在height:0和height:auto之间进行动画。
所以在任何transition中设置display:none都会破坏效果。

这里说一种小技巧来模拟display:none的效果。
先创建外层div。这个是动画容器。对display效果的模拟也依靠他来实现。

<div class="transition">
    <!--Container-->
    <div>
    </div>
</div>
<style>
.transition{
    opacity: 1;
    visibility: visible;
    transition: all 0.4s ease-in-out;
    width: 32px;
    height: 20px;
}
</style>

添加动画效果生效的类名为active。

<style>
.transition.active{
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}
</style>

设置height，width等盒模型属性为0。
这是一种比较奇葩的技巧，简单说就是将元素的margin，border，padding，height和width等影响元素盒模型的属性设置成0，如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏其子元素，算是一种奇技淫巧。

这样在文档流上，transition就没有任何占位了，相当于实现了display:none的效果。