zepto_animate.js 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. /*
  2. * @Description: zepto动画插件
  3. * @FilePath: \cps\public\assets\js\frontend\zepto_animate.js
  4. * @Version: 1.0
  5. * @Autor: CuiGang
  6. * @Date: 2020-04-08 18:02:11
  7. * @LastEditors: CuiGang
  8. * @LastEditTime: 2020-04-08 18:02:26
  9. */
  10. // Zepto.js
  11. // (c) 2010-2016 Thomas Fuchs
  12. // Zepto.js may be freely distributed under the MIT license.
  13. ;(function($, undefined){
  14. var prefix = '', eventPrefix,
  15. vendors = { Webkit: 'webkit', Moz: '', O: 'o' },
  16. testEl = document.createElement('div'),
  17. supportedTransforms = /^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,
  18. transform,
  19. transitionProperty, transitionDuration, transitionTiming, transitionDelay,
  20. animationName, animationDuration, animationTiming, animationDelay,
  21. cssReset = {}
  22. function dasherize(str) { return str.replace(/([A-Z])/g, '-$1').toLowerCase() }
  23. function normalizeEvent(name) { return eventPrefix ? eventPrefix + name : name.toLowerCase() }
  24. if (testEl.style.transform === undefined) $.each(vendors, function(vendor, event){
  25. if (testEl.style[vendor + 'TransitionProperty'] !== undefined) {
  26. prefix = '-' + vendor.toLowerCase() + '-'
  27. eventPrefix = event
  28. return false
  29. }
  30. })
  31. transform = prefix + 'transform'
  32. cssReset[transitionProperty = prefix + 'transition-property'] =
  33. cssReset[transitionDuration = prefix + 'transition-duration'] =
  34. cssReset[transitionDelay = prefix + 'transition-delay'] =
  35. cssReset[transitionTiming = prefix + 'transition-timing-function'] =
  36. cssReset[animationName = prefix + 'animation-name'] =
  37. cssReset[animationDuration = prefix + 'animation-duration'] =
  38. cssReset[animationDelay = prefix + 'animation-delay'] =
  39. cssReset[animationTiming = prefix + 'animation-timing-function'] = ''
  40. $.fx = {
  41. off: (eventPrefix === undefined && testEl.style.transitionProperty === undefined),
  42. speeds: { _default: 400, fast: 200, slow: 600 },
  43. cssPrefix: prefix,
  44. transitionEnd: normalizeEvent('TransitionEnd'),
  45. animationEnd: normalizeEvent('AnimationEnd')
  46. }
  47. $.fn.animate = function(properties, duration, ease, callback, delay){
  48. if ($.isFunction(duration))
  49. callback = duration, ease = undefined, duration = undefined
  50. if ($.isFunction(ease))
  51. callback = ease, ease = undefined
  52. if ($.isPlainObject(duration))
  53. ease = duration.easing, callback = duration.complete, delay = duration.delay, duration = duration.duration
  54. if (duration) duration = (typeof duration == 'number' ? duration :
  55. ($.fx.speeds[duration] || $.fx.speeds._default)) / 1000
  56. if (delay) delay = parseFloat(delay) / 1000
  57. return this.anim(properties, duration, ease, callback, delay)
  58. }
  59. $.fn.anim = function(properties, duration, ease, callback, delay){
  60. var key, cssValues = {}, cssProperties, transforms = '',
  61. that = this, wrappedCallback, endEvent = $.fx.transitionEnd,
  62. fired = false
  63. if (duration === undefined) duration = $.fx.speeds._default / 1000
  64. if (delay === undefined) delay = 0
  65. if ($.fx.off) duration = 0
  66. if (typeof properties == 'string') {
  67. // keyframe animation
  68. cssValues[animationName] = properties
  69. cssValues[animationDuration] = duration + 's'
  70. cssValues[animationDelay] = delay + 's'
  71. cssValues[animationTiming] = (ease || 'linear')
  72. endEvent = $.fx.animationEnd
  73. } else {
  74. cssProperties = []
  75. // CSS transitions
  76. for (key in properties)
  77. if (supportedTransforms.test(key)) transforms += key + '(' + properties[key] + ') '
  78. else cssValues[key] = properties[key], cssProperties.push(dasherize(key))
  79. if (transforms) cssValues[transform] = transforms, cssProperties.push(transform)
  80. if (duration > 0 && typeof properties === 'object') {
  81. cssValues[transitionProperty] = cssProperties.join(', ')
  82. cssValues[transitionDuration] = duration + 's'
  83. cssValues[transitionDelay] = delay + 's'
  84. cssValues[transitionTiming] = (ease || 'linear')
  85. }
  86. }
  87. wrappedCallback = function(event){
  88. if (typeof event !== 'undefined') {
  89. if (event.target !== event.currentTarget) return // makes sure the event didn't bubble from "below"
  90. $(event.target).unbind(endEvent, wrappedCallback)
  91. } else
  92. $(this).unbind(endEvent, wrappedCallback) // triggered by setTimeout
  93. fired = true
  94. $(this).css(cssReset)
  95. callback && callback.call(this)
  96. }
  97. if (duration > 0){
  98. this.bind(endEvent, wrappedCallback)
  99. // transitionEnd is not always firing on older Android phones
  100. // so make sure it gets fired
  101. setTimeout(function(){
  102. if (fired) return
  103. wrappedCallback.call(that)
  104. }, ((duration + delay) * 1000) + 25)
  105. }
  106. // trigger page reflow so new elements can animate
  107. this.size() && this.get(0).clientLeft
  108. this.css(cssValues)
  109. if (duration <= 0) setTimeout(function() {
  110. that.each(function(){ wrappedCallback.call(this) })
  111. }, 0)
  112. return this
  113. }
  114. testEl = null
  115. })(Zepto)