设置了display:none到display:block后，transition动画无效

    设置了display:none到display:block后，transition动画无效，比如下面的代码：

ul{top:0; transition:all 500ms; display:none;}
div:hover ul{top:100px; display:block;}

    当鼠标移动到ul，ul直接出现在top:100px的位置，没有动画效果。

    可以改为设置visibility:hidden和visibility:visible，动画效果是有效的。但是可能会影响布局，因为visibility隐藏后，ul还是把原来的位置占着。用opacity的话和visibility一样。

    用jQuery方法：

$('div').hover(function(){
    $(this).find('ul').show().animate({
        top : 100
    },500);
},function(){
    $(this).find('ul').show().animate({
        top : 0
    },500,function(){
        $('ul').hide();
    });
})