Snippets Collections
JQUERY
function whichAnimationEvent(){
  var t,
      el = document.createElement("fakeelement");

  var animations = {
    "animation"      : "animationend",
    "OAnimation"     : "oAnimationEnd",
    "MozAnimation"   : "animationend",
    "WebkitAnimation": "webkitAnimationEnd"
  }

  for (t in animations){
    if (el.style[t] !== undefined){
      return animations[t];
    }
  }
}

var animationEvent = whichAnimationEvent();

$(".button").click(function(){
  $(this).addClass("animate");
  $(this).one(animationEvent,
              function(event) {
    // Do something when the animation ends
  });
});

/****************************/

JS ONLY
var button = document.querySelector(".button"),
    transitionEvent = whichTransitionEvent();

button.addEventListener("click", function() {
  if (button.classList) {
    button.classList.add("animate");
  } else {
    button.className += " " + "animate";
  }

  button.addEventListener(transitionEvent, customFunction);
});

function customFunction(event) {
  button.removeEventListener(transitionEvent, customFunction);

  // Do something when the transition ends
}
$('.button').click(function(){

  var buttonId = $(this).attr('id');

  $('#modal-container').removeAttr('class').addClass(buttonId);

  $('body').addClass('modal-active');

})

​

$('#modal-container').click(function(){

  $(this).addClass('out');

  $('body').removeClass('modal-active');

});
star

Wed Jan 20 2021 17:02:01 GMT+0000 (UTC)

#transition #animation
star

Thu Dec 24 2020 05:24:43 GMT+0000 (UTC) https://codepen.io/designcouch/pen/obvKxm

#js #modal #animation

Save snippets that work with our extensions

Available in the Chrome Web Store Get Firefox Add-on Get VS Code extension