CSS3与jQuery.addClass和.removeClass的转换

我有一个大的主导航面板，我想在它部署（扩展）时设置它的动画

我正在使用jQuery，通过添加/删除visible/hidden类来触发它的可见性

我必须设置一个延迟时间来应用隐藏类，因为触发器是面板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;  
}

---

转换效果根本不起作用。

不要删除

.hidden

类；它包含您的

转换

样式。只需添加和删除

.visible

类即可

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

    $('#repair-drop').on('mouseleave', function(e) {
        setTimeout(function() {
            $('#repair-drop').removeClass('visible');
        }, 600);        
    });
});

---

这就是说，您可能需要改进您的解决方案，以便用户快速从

#repair drop

中滑鼠并单击

#menu-item-9

，然后才能将其隐藏

$(document).ready(function() {
    $('#menu-item-9').on('click', function(e) {
        $('#repair-drop').data('shown',true).addClass('visible');
    });

    $('#repair-drop').on('mouseleave', function(e) {
        $('#repair-drop').data('shown',false);
        setTimeout(function() {
            if (!$('#repair-drop').data('shown')) {
                $('#repair-drop').removeClass('visible');
            }
        }, 600);        
    });
});

---

您是否考虑过使用jQuery UI的动画功能？比如

jQuery('#menu-item-9').hide({duration:200,effect:'blind'});

您还可以设置移除类的动画，如

jQuery('#menu-item-9').removeClass('hidden', {duration:200,effect:'blind'});

---

您正在添加和删除包含转换CSS的类。我建议按照它自己的规则去做

---

我找到了一种使用jquery插件实现这一点的方法。 谢谢大家的回复

$(document).ready(function() {
    $('#menu-item-9').click(function(){
        $('#repair-drop').removeClass('hide');
        $('#repair-drop').animate({"max-height":"500px", "padding-top":"20px", "opacity":"1"},1500, "easeOutCubic");
    });
$('#repair-drop').on('mouseleave', function(e) {
    setTimeout(function() {
        $('#repair-drop').animate({"max-height":"0px", "overflow":"hidden", "padding":"0px","opacity":"0"},2000, "easeOutCubic");

    }, 600);        

});
});

---

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

.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 class.animation及其工作模式：

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

---

如果你使用jQueryUI，你可以用addClass RemoveClass制作动画和其他东西。你的答案非常符合逻辑，我没有意识到这一点，你是对的。尽管如此，我还是应用了它，并且过渡并没有显示出您需要提供一些HTML和/或工作演示。我现在正在使用jquery easing插件，我觉得我在这里获得了所有解决方案的最佳性能和最简单的实现。做得很好，但是。。。现在css转换被认为是制作动画的方式。超级简单的jquery代码，带有add和remove类，然后是css中的所有动画属性。当div（）中有内容时，这不起作用

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