Restart animation

[Salitehkat]

Hi, Does anyone have an updated trick to restart an animation? I am currently using this:

videoLayer.classList.remove('animated', 'fadeOut'); videoLayer.classList.add('animated', 'fadeIn');

It might be not the best approach.

Thanks so much for any tip.

[warengonzaga]

Hello @Salitehkat based on the documentation...

$.fn.extend({
  animateCss: function(animationName, callback) {
    var animationEnd = (function(el) {
      var animations = {
        animation: 'animationend',
        OAnimation: 'oAnimationEnd',
        MozAnimation: 'mozAnimationEnd',
        WebkitAnimation: 'webkitAnimationEnd',
      };

      for (var t in animations) {
        if (el.style[t] !== undefined) {
          return animations[t];
        }
      }
    })(document.createElement('div'));

    this.addClass('animated ' + animationName).one(animationEnd, function() {
      $(this).removeClass('animated ' + animationName);

      if (typeof callback === 'function') callback();
    });

    return this;
  },
});
And use it like this:

$('#yourElement').animateCss('bounce');
or;
$('#yourElement').animateCss('bounce', function() {
  // Do somthing after animation
});

hope helps...

[Salitehkat]

Thank you!!!!

[warengonzaga]

@daneden and @eltonmesquita please close this thanks!