Question

我在bootstrap下拉列表的shown.bs.dropdown事件处理程序中遇到此问题。在show事件中我设置了动画类，我希望在动画完成后删除该类。不幸的是，该事件在节目事件发生后立即开始。

我尝试在运行时在属性中应用该类（认为这种方式bootstrap将知道要应用的css转换并延迟显示的事件）但没有结果。动画类由animate.css库提供。我设置了一个小提琴来展示我的问题。 - 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;
    }
});

Answer 2

试试这种方式。

$('#userMenu').on({"show.bs.dropdown",function () {
    $('.dropdown-menu').addClass('animated fadeInDown');
});

$('#userMenu').on({"shown.bs.dropdown",function () {
    $('.dropdown-menu').removeClass('animated fadeInDown');
});

$('#userMenu').on({"hide.bs.dropdown",function() {
    $('.dropdown-menu').addClass('animated fadeOutDown');
});

$('#userMenu').on({"hidden.bs.dropdown",function () {
    $('.dropdown-menu').removeClass('animated fadeOutDown');
});

Answer 3

您只需要在添加/删除动画类时创建延迟。对于“隐藏”事件，您需要在添加动画类后手动删除open类，以防止Bootstrap过早隐藏它...

$('#userMenu').on({
  "shown.bs.dropdown": function () {
    $(this).find('.dropdown-menu').addClass('animated fadeInDown');
    setTimeout(function(){
        $('.dropdown-menu').removeClass('animated fadeInDown');
    },1000);
  },
  "hide.bs.dropdown":  function(e) {
    e.preventDefault();
    $(this).find('.dropdown-menu').addClass('animated fadeOutUp');
    setTimeout(function(){
        $('.dropdown-menu').removeClass('animated fadeOutUp').parent().removeClass('open');
    },1000);
  }
});

演示：http://bootply.com/iZObFaEJwr

Answer 4

我遇到了完全相同的问题，为什么下拉事件不适合我，也没有任何意义;事实证明，class="dropdown-toggle"元素中的<a>干扰了其data-toggle="dropdown"属性。

为什么会出现这种情况，不知道（可能是一个包裹问题，我不愿意花更多的时间钻研），但是这个课程的删除对我来说是这样的;在活动中不需要所有那些疯狂的手动动画类黑客。

Bootstrap下拉列表 - 显示.bs.dropdown事件在css转换后未触发

4 个答案: