JavaScript探测CSS动画是否已经完成的方法

前端之家收集整理的这篇文章主要介绍了JavaScript探测CSS动画是否已经完成的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

不啰嗦上代码

'),transition="transition",transitionEnd,animEvent={'start':null,'iteration':null,'end':null},vendorPrefix;
  1. transition = transition.charAt(0).toUpperCase() + transition.substr(1);
  2. vendorPrefix=(function(){//现在的opera也是webkit
  3. var i=0,vendor=["Moz","Webkit","Khtml","O","ms"];
  4. while (i < vendor.length) {
  5. if (typeof el.css(vendor[i] + transition) === "string"){
  6. return vendor[i];
  7. }
  8. i++;
  9. }
  10. return false;
  11. })();
  12. transitionEnd=(function(){
  13. var transEndEventNames = {
  14. WebkitTransition : 'webkitTransitionEnd',MozTransition : 'transitionend',OTransition : 'oTransitionEnd otransitionend',transition : 'transitionend'
  15. }
  16. for(var name in transEndEventNames){
  17. if(typeof el.css(name) === "string"){
  18. return transEndEventNames[name];
  19. }
  20. }
  21. })();
  22. animEvent.end=(function(){
  23. var animEndEventNames = {
  24. WebkitAnimation : 'webkitAnimationEnd',animation : 'animationend'
  25. }
  26. for(var name in animEndEventNames){
  27. if(typeof el.css(name) === "string"){
  28. return animEndEventNames[name];
  29. }
  30. }
  31. })();
  32. animEvent.iteration=(function(){
  33. var animIterationEventNames = {
  34. WebkitAnimation : 'webkitAnimationIteration',animation : 'animationiteration'
  35. }
  36. for(var name in animIterationEventNames){
  37. if(typeof el.css(name) === "string"){
  38. return animIterationEventNames[name];
  39. }
  40. }
  41. })();
  42. animEvent.start=(function(){
  43. var animStartEventNames = {
  44. WebkitAnimation : 'webkitAnimationStart',animation : 'animationstart'
  45. }
  46. for(var name in animStartEventNames){
  47. if(typeof el.css(name) === "string"){
  48. return animStartEventNames[name];
  49. }
  50. }
  51. })();
  52. return {
  53. called:false,addTranEvent:function(elem,fn,duration){
  54. var self = this;
  55. var fncallback = function(){
  56. if(!self.called){
  57. fn();
  58. self.called = true;
  59. }
  60. };
  61. function hand(){
  62. elem.on(transitionEnd,function(){
  63. //elem.unbind(transitionEnd,arguments.callee);
  64. fncallback();
  65. });
  66. }
  67. setTimeout(hand,duration);
  68. },addAnimEvent:function(elem,name,fn){
  69. elem.on(animEvent[name],fn);
  70. },removeAnimEvent:function(elem,fn){
  71. elem.unbind(animEvent[name],setStyleAttribute:function(elem,val){
  72. if(Object.prototype.toString.call(val) === "[object Object]"){
  73. for(var name in val){
  74. if(/^transition|animation|transform/.test(name)){
  75. var styleName=name.charAt(0).toUpperCase() + name.substr(1);
  76. elem.css(vendorPrefix+styleName,val[name]);
  77. }else{
  78. elem.css(name,val[name]);
  79. }
  80. }
  81. }
  82. }
  83. };
  84. })(),</pre>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章