transition不支持display属性

想让display从none变为block，或者从block变为none时，实现这样的动画效果大多数人都会采用transition。然而可惜的是transition并不支持display。那么能想到的办法就是使用visibility属性实现从 visible到hidden的转换。

但是visibility属性与display的区别
display隐藏的元素是脱离文档流的，它不在页面中占用空间。而visibility: hidden的元素会在页面上留白。所以还是display的用法好一点，那么怎样来填这个坑，可以通过设置max-height(max-width等等)，使这些属性 进行过渡(transition).
例如:

 .table_list{  
            width:100%;   
            top:10px;  
            max-height: 0px;
            margin-bottom: 10px;
            position:relative;     
            opacity: 0;
            font-size: 12px; 
            -webkit-transition: max-height 2s linear;      

            }  

.cenima_name:hover .table_list
    {   
            opacity: 1; 
            max-height: 300px;
    }

上面这段代码实现的功能就是，鼠标悬浮在一个div上，显示另一个div。
但是这样做的前提是另一个div必须是包含它的div的子元素。

然而问题是当你要显示的元素小于300px时，就会留白，也不美观。所以在.cenima_name:hover .table_list中加入overflow:hidden。这样的话就可以比较完美的解决了transition不支持display属性这个问题。

.cenima_name:hover .table_list
    {   

        opacity: 1; 
        max-height: 300px;
        overflow: hidden;

    }