2

如何使用 CSS 转换不显示元素的属性？我目前的解决方案是使用 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 的方法。在那儿？

4

1 回答 1

2

我刚刚找到了解决方法。您所需要的只是使用动画并在应用 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”类。当您悬停时，它会稍后在动画完成时删除“开放”类。

于 2014-01-09T18:15:31.753 回答