component-animations-css3.js 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  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. // CSS3 animations
  12. var _componentAnimationCSS = function() {
  13. // Toggle animations
  14. $('body').on('click', '.animation', function (e) {
  15. // Get animation class from 'data' attribute
  16. var animation = $(this).data('animation');
  17. // Apply animation once per click
  18. $(this).parents('.box').addClass('animated ' + animation).one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function () {
  19. $(this).removeClass('animated ' + animation);
  20. });
  21. e.preventDefault();
  22. });
  23. };
  24. //
  25. // Return objects assigned to module
  26. //
  27. return {
  28. init: function() {
  29. _componentAnimationCSS();
  30. }
  31. }
  32. }();
  33. // Initialize module
  34. // ------------------------------
  35. document.addEventListener('DOMContentLoaded', function() {
  36. AnimationsCSS3.init();
  37. });