javascript - Bootstrap 下拉菜单 - shown.bs.dropdown 事件在 css 转换后未触发

Question

我在 Bootstrap 下拉列表的 shown.bs.dropdown 事件处理程序中遇到了这个问题。在演出事件中，我设置了动画类，我希望在动画完成后删除该类。不幸的是，该事件在演出事件结束后立即触发。

我尝试在运行时在属性中应用该类(认为这样 Bootstrap 将了解要应用的 css 转换并延迟显示的事件)，但没有结果。动画类由 animate.css 库提供。我设置了一个 fiddle 来展示我的问题。 -http://jsfiddle.net/u08bt6ck/

这是我的标记:

<ul class="nav navbar-nav">
    <li id="userMenu" class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Open me</a>
        <ul class="dropdown-menu">
            <li><a href="#"><i class="fa fa-sliders"></i>lnk 1</a></li>
            <li><a href="#"><i class="fa fa-user"></i>lnk 2</a></li>
            <li><a href="#"><i class="fa fa-clock-o"></i>lnk 3</a></li>
        </ul>
    </li>
</ul>

这是 js:

$('#userMenu').on({
    "show.bs.dropdown": function () {
        $('.dropdown-menu', this).addClass('animated fadeInDown');
    },
    "shown.bs.dropdown": function () {
        $('.dropdown-menu', this).removeClass('animated fadeInDown');
    },
    "hide.bs.dropdown":  function() {
        $('.dropdown-menu', this).addClass('animated fadeOutDown');
    },
    "hidden.bs.dropdown": function () {
        $('.dropdown-menu', this).removeClass('animated fadeOutDown');
        //alert('ni ca s-a terminat');
    }
});

Answer 1

对于遇到此问题的每个人，我将在此处发布我如何设法解决此问题。

基本上，我在用户单击时在类中设置淡入淡出，并让它在那里直到菜单关闭。如果菜单开始关闭，则删除 fadeIn 类，添加 fadeOut 类，并且在动画完成后(由 jquery .on([animationEndSelectors]) 处理)，我删除 fadeOut 类并关闭子菜单(通过旋转ul 公开课)。

var animationEndSelectors = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var inAnimation = 'animated ' + 'fadeInDown';
var outAnimation = 'animated ' + 'fadeOutUp';

$('#userMenu').on({
    "show.bs.dropdown": function () {
        $('.dropdown-menu', this).addClass(inAnimation);
    },
    "hide.bs.dropdown":  function() {
        var ddl = this;

        $(ddl).addClass('closing');
        $('.dropdown-menu', this).removeClass(inAnimation);
        $('.dropdown-menu', this).addClass(outAnimation);
        $('.dropdown-menu', this).one(animationEndSelectors, function () {
            $('.dropdown-menu', ddl).removeClass(outAnimation);
            $(ddl).removeClass('open closing');
        });
        return false;
    }
});