6

ブートストラップとそのレスポンシブ JS+CSS を使用して Web サイトを開発しています。

ページの上部には、ビューポートが狭すぎる場合に備えて「メニューを展開」ボタンが表示される固定ナビゲーション バーがあります。このボタンはアニメーション (CSS3 だと思います) で魔法のように動作し、満足していますが、アニメーションが終了するたびに (開くアニメーションと閉じるアニメーションの両方で) もっと何かをしたいと思います (jquery でクラスを切り替えます)。 1）。私は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 に答える