如何收听引导动画的结尾

Posted 2023-03-06

【中文标题】如何收听引导动画的结尾

【英文标题】：how to listen to the end of a bootstrap animation

【发布时间】：2013-04-01 15:21:24

【问题描述】：

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

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

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

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

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

【问题讨论】：

我也遇到过多次出现动画引导对象的问题。就我而言，如果我有两个模态一个接一个地触发，并且我对 hidden 采取行动，它在隐藏动画完成后触发，模态组件的状态会发生奇怪的事情。我认为这个逻辑在库端并不完美，切换可能是一个不错的选择。

【参考方案1】：

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

示例：if( $(foo).is(':animated') ) ...

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

【讨论】：

这并不是我真正需要的，因为我想听任何动画的结尾。但这可能是一个很好的起点:)

我已经解决了这个问题（但最初的问题仍然存在：为什么收听事件会阻止动画？）。现在我听这个是为了得到我想要得到的同样的东西：$('body').on('hidden', '#main-navbar .nav-collapse', function () console.log('we have hidden some navbar items'); );

你需要某种回调来让 dom 知道动画何时完成。你已经提到了切换类。因此，当一个元素开始动画时，您可以将类更改为“isAnimating”，并作为关闭动画回调的一部分将类切换为 animationFinished。之后您还必须重置课程，以便它可以一次又一次地工作。希望解释是有道理的，如果不是我会做一个小提琴。 api.jquery.com/trigger 可以帮到你

【参考方案2】：

如果你使用引导和转换（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");
);

【讨论】：

如果您使用的是第二种方法，最好使用一种而不是 on，这样只会触发一个事件

【参考方案3】：

$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 被不同的组件使用。

这里是jsfiddlesn-p 演示（基于 Bootstrap v4）。

(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>

【参考方案4】：

$('.collapse').on('bsTransitionEnd', function(e) 
  console.log('finished')
)

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