显示时的CSS转换：无设置

Question

如何使用CSS转换显示无元素的属性？ 我目前的解决方案是使用JavaScript将display设置为block，等待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非常相似，一旦您将鼠标悬停在必需元素上，它将应用“打开”类。当你将鼠标悬停时，它会在动画完成后稍后删除“打开”类。