6

我正在使用引导程序及其响应式 JS+CSS 开发一个网站。

在页面的顶部，我有一个固定的导航栏，其中会显示一个“展开菜单”按钮，以防视口太紧。这个按钮通过动画（我认为是 CSS3 的）发挥了它的魔力，我对它很满意，但我想做更多的事情（用 jquery 切换类）每次动画完成（打开动画和关闭动画）一）。我在考虑一个 javascript 监听器（通过 jquery .on 函数定义它更好），但我真的不知道我应该听什么事件！有任何想法吗？

更新 我很喜欢通过在我想要控制的对象上收听这个事件几乎可以很好地完成工作：

$("#main-navbar .nav-collapse").on("transitionend", function(event){    
    console.log("end of the animation");
}

唯一的问题是它在该对象上弄乱了引导动画：它第一次工作，但是当我想关闭扩展的导航栏时，什么也没有发生（似乎我的听众覆盖了引导动画。很奇怪，是吧？）

4

4 回答 4

6

如果你使用引导和转换（css3 转换），你可以试试这个：

$("body").on($.support.transition.end, '#main-navbar .nav-collapse', function(event){    
    console.log("end of the animation");
});

$.support.transition.end 包含以下事件之一：webkitTransitionEnd, transitionend, oTransitionEnd otransitionend, transitionend.

但如果你使用 css3 动画（css3 动画名称和关键帧），你可以试试这个：

$("body").on('webkitAnimationEnd oanimationend msAnimationEnd animationend', '#main-navbar .nav-collapse', function(event){    
    console.log("end of the animation");
});
于 2013-11-28T21:13:08.353 回答
2 
$target.on("shown.bs.collapse", function(event){    
    console.log("end of the animation");
});

奇怪的是，没有人提到Util.emulateTransitionEnd()哪个是故意创建的，并被 Bootstrap 组件用来捕捉动画结束的时间。

$('#nav')
  .one(
    'bsTransitionEnd', // Util.TRANSITION_END
    handler
  )
  .emulateTransitionEnd(600); // Collapse.TRANSITION_DURATION

在您的特定情况下，您可能希望扩展相应的 Bootstrap 插件，以便您可以确定您的具体情况 - Collapse 由不同的组件使用。

这是演示的jsfiddle片段（基于 Bootstrap v4）。

jsfiddle.net/ru5ow96z

(function($) {
  var Collapse = $.fn.collapse.Constructor;
  var navbar = $('#nav');

  $.extend(Collapse.Default, {
    navbarClass: ''
  });

  var _show = Collapse.prototype.show;
  Collapse.prototype.show = function() {
    _show.apply(this, Array.prototype.slice.apply(arguments));

    var navbarClass = this._config.navbarClass;
    if (navbarClass && !navbar.hasClass(navbarClass)) {
      navbar.addClass(navbarClass);
    }
  }

  var _hide = Collapse.prototype.hide;
  Collapse.prototype.hide = function() {
    _hide.apply(this, Array.prototype.slice.apply(arguments));

    var navbarClass = this._config.navbarClass;
    if (navbarClass && navbar.hasClass(navbarClass)) {
      navbar
        .one('bsTransitionEnd', function() { // Util.TRANSITION_END
          navbar.removeClass(navbarClass);
        })
        .emulateTransitionEnd(300); // Collapse.TRANSITION_DURATION / 2
    }
  }
})(window.jQuery);
<nav id="nav" role="navigation" class="navbar fixed-top navbar-light bg-light">
  <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#nav_items" data-navbar-class="navbar-dark bg-dark" aria-expanded="false" aria-label="Menu">
    <span class="text-hide">Menu</span>
    <span class="navbar-toggler-icon"></span>
  </button>

  <div id="nav_items" class="collapse navbar-collapse">
    <div class="nav navbar-nav">
      <a class="nav-item nav-link active" href="">Link <span class="sr-only">Home</span></a>
      <a class="nav-item nav-link" href="">Link2</a>
      <a class="nav-item nav-link" href="">Link3</a>
    </div>
  </div>
</nav>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<style type="text/css">
  button:focus {
    outline-width: 0;
  }

  .navbar-collapse.collapse.show {
    height: 100vh;
  }

  .navbar-nav {
    height: 100vh;
  }

  .navbar-toggler {
    border: none;
    padding: 0.25rem 0;
  }

  .navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,.5)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  }
</style>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>

于 2018-01-05T15:18:05.453 回答
0

jQuery 内置了一个动画监听器：http: //docs.jquery.com/Selectors/animated

例子：if( $(foo).is(':animated') ) {...}

然后，如果一个元素是 !animated 你可以应用你想要的任何逻辑。

于 2013-04-10T01:06:00.120 回答
0 
$('.collapse').on('bsTransitionEnd', function(e) {
  console.log('finished')
})

这对我来说适用于任何类型的可折叠面板。您可以尝试使用不同的选择器。

于 2020-10-02T16:06:47.663 回答