css3 - texto - efectos de transicion css

cómo escuchar el final de una animación de arranque

Question

Estoy desarrollando un sitio web usando bootstrap y su respuesta JS + CSS.

En la parte superior de la página, tengo una barra de navegación fija donde se muestra un botón "expandir menú" en caso de que la ventana gráfica sea demasiado apretada. Este botón hace su magia con una animación (una de CSS3, creo) y estoy contento con ella, pero me gustaría hacer algo más (alternar clases con jquery) cada vez que finaliza la animación (tanto la animación abierta como la de cierre) uno). Estaba pensando en un oyente de JavaScript (incluso mejor definiéndolo gracias a la función jquery .on), ¡pero realmente no sé qué evento debería escuchar! ¿Algunas ideas?

ACTUALIZACIÓN Me he dado cuenta de que al escuchar este evento en el objeto que quiero controlar casi hace bien el trabajo:

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

el único problema es que confunde las animaciones de arranque con ese objeto: la primera vez que funciona, pero cuando quiero cerrar la barra de navegación expandida, no pasa nada (parece que mi oyente anula los de arranque) bastante raro, ¿eh?

Answer 1

jQuery tiene un oyente de animación integrado: http://docs.jquery.com/Selectors/animated

Ejemplo: if( $(foo).is('':animated'') ) {...}

Entonces, si un elemento está animado, puedes aplicar la lógica que quieras.

Answer 2

Si usa bootstrap y transiciones (transición css3) puede intentar esto:

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

$ .support.transition.end contiene uno de estos eventos: webkitTransitionEnd, transitionend, oTransitionEnd otransitionend, transitionend.

Pero si usa animación css3 (css3 nombre-animación y fotogramas clave) puede intentar esto:

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

Answer 3

$target.on("shown.bs.collapse", function(event){    
    console.log("end of the animation");
});

Util.emulateTransitionEnd() pregunto si nadie menciona acerca de Util.emulateTransitionEnd() que fue creado a propósito y usado por los componentes de Bootstrap para capturar cuando termina la animación.

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

En su caso particular, es posible que desee extender el correspondiente complemento de Bootstrap, para que pueda averiguar cuál es el caso exacto suyo: los diferentes componentes utilizan el colapso.

Aquí está jsfiddle snippet to demo (basado en 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>