设置display:none时的CSS转场

Question

如何使用CSS转换显示为none的元素的属性?我目前的解决方案是用JavaScript设置显示阻塞，等待10毫秒重新绘制，然后应用类来改变我想要动画的属性。

注意:为了代码简洁，我使用jQuery

CSS -动画不透明度为例。不要关心$.show().

.element
{
    display:none;
    opacity:0;
    -webkit-transition:all 0.5s;
    -moz-transition:all 0.5s;
    -ms-transition:all 0.5s;
    -o-transition:all 0.5s;
    transition:all 0.5s;
}
.element.shown
{
    opacity:1;
}

---

JavaScript

function show()
{
    var $element=$('.element');
    $element.css({display:'block'});
    
    //Add class a few moments later than chaning display to block, otherwise animations CSS Transitions won't fire
    setTimeout(function(){
        $element.addClass('shown');
    },10);
}
function hide()
{
    var $element=$('.element');
    $element.removeClass('shown');
    
    //Remove element from display after transition ends
    $element.on('webkitTransitionEnd otransitionend oTransitionEnd MSTransitionEnd transitionend',function()
    {
        $element.css({display:'none'});
    });
}

我觉得应该有一个更好的方法，一个只有css的方法。是吗?

Answer 1

我刚刚找到了解决方法。所有你需要的是使用动画，并在你应用display:block后一点点启动它。这样的:

@keyframes submenu_animation {
    from {
        opacity: 0;
    }
    1% {
        opacity: 0;
    }
    99% {
        opacity: 1;
    }
    to {
        opacity: 1;
    }
}
li ul {
    opacity: 0;
    display: none;
    animation-name: submenu_animation;
    animation-duration: 300ms;
    animation-direction: reverse;
li ul.open {
    display: block;
}
li:hover ul {
    animation-direction: normal;
    opacity: 1;
}

Javascript是相当相同的，它会应用类"open"一旦你悬停在所需的元素。当你悬停时，它会在动画完成后移除open类。