jquery - 使用 jQuery .addClass 和 .removeClass 的 CSS3 过渡

Question

我有一个很大的主导航面板，我想在它部署(展开)时制作动画。

我正在使用 jQuery 通过添加/删除可见/隐藏类来触发它的可见性。

我必须设置延迟时间才能应用隐藏类，因为触发器是面板 div 之外的按钮。 (如果我在按钮上使用鼠标悬停，一旦你推出面板就会消失)

代码是这样的

$(document).ready(function() {
    $('#menu-item-9').click(function(){
        $('#repair-drop').removeClass('hidden');
        $('#repair-drop').addClass('visible');
    });
$('#repair-drop').on('mouseleave', function(e) {
    setTimeout(function() {
        $('#repair-drop').removeClass('visible').addClass('hidden');
    }, 600);        

});
});

我的CSS如下

.hidden{
    max-height: 0px;
    -webkit-transition: max-height 0.8s;
    -moz-transition: max-height 0.8s;
    transition: max-height 0.8s;

}
.visible{
    max-height: 500px;  
}

过渡效果根本不起作用。

Answer 1

我厌倦了这个问题，最好使用动画:

.container .element.animation  {
    animation: SHW .5s;
    animation-fill-mode: both
}
@keyframes SHW {
    from {
        transform:scale(0.7);
        opacity:0
    }
    to {
        transform: scale(1);
        opacity:1
    }
}

仅添加到 .element 类 .animation 及其工作:

$('.container .element').addClass('animation');