animations_css3.js 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. /* ------------------------------------------------------------------------------
  2. *
  3. * # CSS3 animations
  4. *
  5. * Demo JS code for animations_css3.html page
  6. *
  7. * ---------------------------------------------------------------------------- */
  8. // Setup module
  9. // ------------------------------
  10. var AnimationsCSS3 = function() {
  11. //
  12. // Setup module components
  13. //
  14. // CSS3 animations
  15. var _componentAnimationCSS = function() {
  16. // Toggle animations
  17. $('body').on('click', '.animation', function (e) {
  18. // Get animation class from 'data' attribute
  19. var animation = $(this).data('animation');
  20. // Apply animation once per click
  21. $(this).parents('.card').addClass('animated ' + animation).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
  22. $(this).removeClass('animated ' + animation);
  23. });
  24. e.preventDefault();
  25. });
  26. };
  27. //
  28. // Return objects assigned to module
  29. //
  30. return {
  31. init: function() {
  32. _componentAnimationCSS();
  33. }
  34. }
  35. }();
  36. // Initialize module
  37. // ------------------------------
  38. document.addEventListener('DOMContentLoaded', function() {
  39. AnimationsCSS3.init();
  40. });