@keyframes/core
Version:
Keyframes allows dynamic generation of CSS3 keyframes with callback events and other niceness.
2 lines (1 loc) • 14.2 kB
JavaScript
!function r(i,o,a){function s(e,t){if(!o[e]){if(!i[e]){var n="function"==typeof require&&require;if(!t&&n)return n(e,!0);if(u)return u(e,!0);throw(t=new Error("Cannot find module '"+e+"'")).code="MODULE_NOT_FOUND",t}n=o[e]={exports:{}},i[e][0].call(n.exports,function(t){return s(i[e][1][t]||t)},n,n.exports,r,i,o,a)}return o[e].exports}for(var u="function"==typeof require&&require,t=0;t<a.length;t++)s(a[t]);return s}({1:[function(t,e,n){var r={animationIterationCount:!0,boxFlex:!0,boxFlexGroup:!0,boxOrdinalGroup:!0,columnCount:!0,flex:!0,flexGrow:!0,flexPositive:!0,flexShrink:!0,flexNegative:!0,flexOrder:!0,gridRow:!0,gridColumn:!0,fontWeight:!0,lineClamp:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,tabSize:!0,widows:!0,zIndex:!0,zoom:!0,fillOpacity:!0,stopOpacity:!0,strokeDashoffset:!0,strokeOpacity:!0,strokeWidth:!0};e.exports=function(t,e){return"number"!=typeof e||r[t]?e:e+"px"}},{}],2:[function(t,e,n){var r=/[A-Z]/g,i=/^ms-/,o={};function a(t){return"-"+t.toLowerCase()}e.exports=function(t){var e;return o.hasOwnProperty(t)?o[t]:(e=t.replace(r,a),o[t]=i.test(e)?"-"+e:e)}},{}],3:[function(t,e,n){function r(){return new Promise(function(t){requestAnimationFrame(function(){t()})})}function i(){}var o,a=this&&this.__assign||function(){return(a=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},s=this&&this.__createBinding||(Object.create?function(t,e,n,r){void 0===r&&(r=n);var i=Object.getOwnPropertyDescriptor(e,n);i&&("get"in i?e.__esModule:!i.writable&&!i.configurable)||(i={enumerable:!0,get:function(){return e[n]}}),Object.defineProperty(t,r,i)}:function(t,e,n,r){t[r=void 0===r?n:r]=e[n]}),u=this&&this.__exportStar||function(t,e){for(var n in t)"default"===n||Object.prototype.hasOwnProperty.call(e,n)||s(e,t,n)},l=this&&this.__awaiter||function(t,a,s,u){return new(s=s||Promise)(function(n,e){function r(t){try{o(u.next(t))}catch(t){e(t)}}function i(t){try{o(u.throw(t))}catch(t){e(t)}}function o(t){var e;t.done?n(t.value):((e=t.value)instanceof s?e:new s(function(t){t(e)})).then(r,i)}o((u=u.apply(t,a||[])).next())})},h=this&&this.__generator||function(r,i){var o,a,s,u={label:0,sent:function(){if(1&s[0])throw s[1];return s[1]},trys:[],ops:[]},c=Object.create(("function"==typeof Iterator?Iterator:Object).prototype);return c.next=t(0),c.throw=t(1),c.return=t(2),"function"==typeof Symbol&&(c[Symbol.iterator]=function(){return this}),c;function t(n){return function(t){var e=[n,t];if(o)throw new TypeError("Generator is already executing.");for(;u=c&&e[c=0]?0:u;)try{if(o=1,a&&(s=2&e[0]?a.return:e[0]?a.throw||((s=a.return)&&s.call(a),0):a.next)&&!(s=s.call(a,e[1])).done)return s;switch(a=0,(e=s?[2&e[0],s.value]:e)[0]){case 0:case 1:s=e;break;case 4:return u.label++,{value:e[1],done:!1};case 5:u.label++,a=e[1],e=[0];continue;case 7:e=u.ops.pop(),u.trys.pop();continue;default:if(!(s=0<(s=u.trys).length&&s[s.length-1])&&(6===e[0]||2===e[0])){u=0;continue}if(3===e[0]&&(!s||e[1]>s[0]&&e[1]<s[3]))u.label=e[1];else if(6===e[0]&&u.label<s[1])u.label=s[1],s=e;else{if(!(s&&u.label<s[2])){s[2]&&u.ops.pop(),u.trys.pop();continue}u.label=s[2],u.ops.push(e)}}e=i.call(r,u)}catch(t){e=[6,t],a=0}finally{o=s=0}if(5&e[0])throw e[1];return{value:e[0]?e[1]:void 0,done:!0}}}},c=this&&this.__read||function(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,i,o=n.call(t),a=[];try{for(;(void 0===e||0<e--)&&!(r=o.next()).done;)a.push(r.value)}catch(t){i={error:t}}finally{try{r&&!r.done&&(n=o.return)&&n.call(o)}finally{if(i)throw i.error}}return a},f=this&&this.__spreadArray||function(t,e,n){if(n||2===arguments.length)for(var r,i=0,o=e.length;i<o;i++)!r&&i in e||((r=r||Array.prototype.slice.call(e,0,i))[i]=e[i]);return t.concat(r||Array.prototype.slice.call(e))},p=this&&this.__importDefault||function(t){return t&&t.__esModule?t:{default:t}},y=(Object.defineProperty(n,"__esModule",{value:!0}),n.isBrowser=void 0,p(t("add-px-to-style"))),d=p(t("hyphenate-style-name")),m=(n.isBrowser="undefined"!=typeof window,n.isBrowser&&((p=document.createElement("style")).setAttribute("id","keyframesjs-stylesheet"),document.head.appendChild(p),o=p.sheet),{onStart:i,onBeforeStart:i,onIteration:i,onEnd:i,onQueueComplete:i,onCancel:i}),p=(v.isSupported=function(){return void 0!==document.body.style.animationName},v.prototype.freeze=function(){var e,n=this,t=v.ruleCache[this.mountedElement.style.animationName];t&&(e=a({},getComputedStyle(this.mountedElement)),t.forEach(function(t){n.mountedElement.style[t]=e[t]}),this.frozenStyles=f([],c(new Set(this.frozenStyles.concat(t))),!1))},v.prototype.unfreeze=function(){var e=this;this.frozenStyles.length&&(this.frozenStyles.forEach(function(t){e.mountedElement.style[t]=""}),this.frozenStyles=[])},v.prototype.reset=function(){return l(this,void 0,void 0,function(){return h(this,function(t){switch(t.label){case 0:return this.log("reset"),this.playing=!1,this.removeEvents(),this.mountedElement.style.animationPlayState="running",this.mountedElement.style.animation="none",[4,r()];case 1:return t.sent(),[2,this]}})})},v.prototype.pause=function(){return this.mountedElement.style.animationPlayState="paused",this},v.prototype.resume=function(){return this.mountedElement.style.animationPlayState="running",this},v.prototype.play=function(e,n){var r,i=this,t=(this.log("play",e),n||{}),o=t.onBeforeStart,o=void 0===o?null:o,a=t.onStart,s=void 0===a?null:a,a=t.onIteration,u=void 0===a?null:a,a=t.onEnd,c=void 0===a?null:a,a=t.onCancel,t=void 0===a?null:a;return!0===this.playing&&(this.log("cancelled"),this.previousCancel)&&(this.queueStore=[],this.previousCancel()),t&&(this.previousCancel=t),this.mountedElement.style.animationName===this.getAnimationName(e)?(this.freeze(),requestAnimationFrame(function(){return l(i,void 0,void 0,function(){return h(this,function(t){switch(t.label){case 0:return[4,this.reset()];case 1:return t.sent(),this.play(e,n),this.unfreeze(),[2]}})})})):(this.playing=!0,r=Array.isArray(e)?e.length:1,a=v.playCSS(e),t=function(t,e){var n="".concat(t,"Listener");i.mountedElement.removeEventListener(t,i[n]),i[n]=e,i.mountedElement.addEventListener(t,i[n])},this.log("onBeforeStart"),o&&o(),this.mountedElement.style.animationPlayState="running",this.mountedElement.style.animation=a,t("animationiteration",function(t){i.log("animationiteration",t),u&&u(t)}),t("animationend",function(t){--r||(i.log("ended",t),i.playing=!1,c&&!r&&c(t))}),t("animationstart",function(t){i.log("onStart",t),s&&s(t)})),this},v.prototype.playNext=function(){var e=this,t=this.queueStore[this.queueStore.length-1];t?this.log("playNext",t):this.log("Queue Complete"),t?this.play(t,{onEnd:function(t){e.queueStore.pop(),e.callbacks.onEnd&&e.callbacks.onEnd(t),e.playNext()},onCancel:this.callbacks.onCancel,onIteration:this.callbacks.onIteration}):this.callbacks.onQueueComplete&&this.callbacks.onQueueComplete()},v.prototype.removeEvents=function(){return this.log("events cleared"),this.mountedElement.removeEventListener("animationiteration",this.animationiterationListener),this.mountedElement.removeEventListener("animationend",this.animationendListener),this.mountedElement.removeEventListener("animationstart",this.animationstartListener),this},v.prototype.updateCallbacks=function(t){t&&(this.callbacks=a(a({},this.callbacks),t))},v.prototype.queue=function(t,e){var n=this,r=this.queueStore.length,e=(this.updateCallbacks(a(a({},m),e)),e=t,Array.isArray(e)?f([],c(e),!1):"object"==typeof e?a({},e):e.toString());return Array.isArray(e)?this.queueStore=e.reverse().concat(this.queueStore):this.queueStore.unshift(e),this.log("queued",t,r),r?this.playing||this.playNext():requestAnimationFrame(function(){return l(n,void 0,void 0,function(){return h(this,function(t){switch(t.label){case 0:return[4,this.reset()];case 1:return t.sent(),this.playNext(),[2]}})})}),this},v.prototype.chain=function(t,e){return this.queue(t,e),this},v.prototype.resetQueue=function(){return l(this,void 0,void 0,function(){return h(this,function(t){switch(t.label){case 0:return this.log("resetQueue"),[4,r()];case 1:return t.sent(),this.removeEvents(),this.queueStore=[],[4,this.reset()];case 2:return t.sent(),[2,this]}})})},v.prototype.loop=function(t){return l(this,arguments,void 0,function(e,n){var r,i=this;return void 0===n&&(n={}),h(this,function(t){switch(t.label){case 0:return this.log("loop",e),[4,this.resetQueue()];case 1:return t.sent(),(r=function(){i.queue(e,a(a({},n),{onQueueComplete:function(){return r()}}))})(),[2,this]}})})},v.prototype.getAnimationName=function(t){var e=this;return Array.isArray(t)?t.map(function(t){return e.getAnimationName(t)}).join(", "):"string"==typeof t?t.split(" ")[0]:t.name},v.playCSS=function(t){function e(t){return[(t=a({duration:"0s",timingFunction:"ease",delay:"0s",iterationCount:1,direction:"normal",fillMode:"forwards"},t)).name,t.duration,t.timingFunction,t.delay,t.iterationCount,t.direction,t.fillMode].join(" ")}if(Array.isArray(t)){for(var n=[],r=0;r<t.length;r+=1){var i=t[r];n.push("string"==typeof i?i:e(i))}return n.join(", ")}return"string"==typeof t?t:e(t)},v.generateCSS=function(t){var e,n,r="@keyframes ".concat(t.name," {");for(e in t)"name"!==e&&"media"!==e&&"complete"!==e&&(n=(t=>{if(!Object.keys(t).length)return"";var e,n="";for(e in t)n+="".concat((0,d.default)(e),":").concat((0,y.default)(e,t[e]),";");return n})(t[e]),r+="".concat(e," {").concat(n,"}"));return r+="}",r=t.media?"@media ".concat(t.media,"{").concat(r,"}"):r},v.generate=function(t){this.addToRuleCache(t);var e=this.generateCSS(t),n=v.rules.indexOf(t.name),n=(-1<n&&(v.sheet.deleteRule(n),v.rules.splice(n,1)),(v.sheet.cssRules||v.sheet.rules).length);v.sheet.insertRule(e,n),v.rules[n]=t.name},v.define=function(t){if(Array.isArray(t))for(var e=0;e<t.length;e+=1)this.generate(t[e]);else this.generate(t)},v.defineCSS=function(t){if(Array.isArray(t)){for(var e="",n=0;n<t.length;n+=1)e+=this.generateCSS(t[n]);return e}return this.generateCSS(t)},v.addToRuleCache=function(t){var e;this.ruleCache[t.name]||(e=Object.values(t).filter(function(t){return"object"==typeof t}).map(function(t){return Object.keys(t)}).flat(),this.ruleCache[t.name]=f([],c(new Set(e)),!1))},v.prototype.log=function(t){for(var e=1;e<arguments.length;e++)e-1,0;this.debug},v.sheet=o,v.rules=[],v.ruleCache={},v.clearRules=function(){for(v.rules=[];v.sheet.cssRules.length;)v.sheet.deleteRule(0)},v);function v(t,e){void 0===e&&(e=!1),this.playing=!1,this.previousCancel=i,this.debug=!1,this.queueStore=[],this.callbacks=m,this.animationstartListener=i,this.animationendListener=i,this.animationiterationListener=i,this.animationcancelListener=i,this.mountedElement=t,this.frozenStyles=[],this.debug=e}n.isBrowser&&(window.Keyframes=p),u(t("./pathfinder"),n),u(t("./spritesheet"),n),n.default=p},{"./pathfinder":4,"./spritesheet":5,"add-px-to-style":1,"hyphenate-style-name":2}],4:[function(t,e,n){var g=this&&this.__assign||function(){return(g=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},t=(Object.defineProperty(n,"__esModule",{value:!0}),n.circlePath=n.bezierPath=void 0,t("./keyframes"));var b=function(t,e){return{x:t=void 0===t?0:t,y:e=void 0===e?0:e}},a=function(t){return t*t*t},s=function(t){return 3*t*t*(1-t)},u=function(t){return 3*t*(1-t)*(1-t)},c=function(t){return(1-t)*(1-t)*(1-t)},y=function(t,e,n,r,i){var o=b();return o.x=e.x*a(t)+n.x*s(t)+r.x*u(t)+i.x*c(t),o.y=e.y*a(t)+n.y*s(t)+r.y*u(t)+i.y*c(t),o};n.bezierPath=function(t,e,n,r,i){for(var o=g({bezierSteps:100,transform:""},t),a=(null==i&&(i=e),b(e[0],e[1])),s=b(n[0],n[1]),u=b(r[0],r[1]),c=b(i[0],i[1]),l={},h=1/o.bezierSteps,f=0;f<=1.01;f+=h){var p=y(f,a,c,u,s);l["".concat(100-Math.round(100*f),"%")]={transform:"translate(".concat(p.x,"px,").concat(p.y,"px) ").concat(o.transform)}}return Object.assign({},t,l)};n.circlePath=function(t,e,n){for(var r,i,o,a=g({circleSteps:100,transform:""},t),s={},u=b(e[0],e[1]),c=1.5*Math.PI,l=Math.PI/180,h=100/a.circleSteps,f=360/a.circleSteps,p=0;p<=a.circleSteps;p+=1){r=c+f*p*l,i=n;var y={x:(y=u).x+i*Math.cos(r),y:y.y+i*Math.sin(r)};s["".concat(Math.round(h*p),"%")]={transform:"translate(".concat(y.x,"px,").concat(y.y,"px) ").concat(a.transform)}}for(o in t){var d,m=t[o];for(d in s){var v=s[d];if(o===d&&v.transform&&m.transform){s[d].transform="".concat(v.transform," ").concat(m.transform);break}}}return Object.assign({},t,s)},t.isBrowser&&(t=window).Keyframes&&(t.Keyframes.bezierPath=n.bezierPath,t.Keyframes.circlePath=n.circlePath)},{"./keyframes":3}],5:[function(t,e,n){var h=this&&this.__assign||function(){return(h=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var i in e=arguments[n])Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t}).apply(this,arguments)},f=this&&this.__rest||function(t,e){var n={};for(i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols)for(var r=0,i=Object.getOwnPropertySymbols(t);r<i.length;r++)e.indexOf(i[r])<0&&Object.prototype.propertyIsEnumerable.call(t,i[r])&&(n[i[r]]=t[i[r]]);return n},t=(Object.defineProperty(n,"__esModule",{value:!0}),n.playSpriteSheet=n.spriteSheet=void 0,t("./keyframes"));n.spriteSheet=function(t){for(var e=t.rows,e=void 0===e?1:e,n=t.cols,n=void 0===n?1:n,r=t.width,r=void 0===r?0:r,i=t.height,i=void 0===i?0:i,t=f(t,["rows","cols","width","height"]),o=h(h(h({},{offsetX:0,offsetY:0,count:e*n,spriteWidth:r/n,spriteHeight:i/e,loop:!0}),{rows:e,cols:n,width:r,height:i}),t),a=100/o.count,s={},u=o.offsetX,c=o.offsetY,l=0;l<o.count;l+=1)s["".concat(Math.round(a*l),"%")]={backgroundPosition:"-".concat(u,"px -").concat(c,"px")},u>=o.width-o.spriteWidth?c+=o.spriteHeight:u+=o.spriteWidth;return Object.assign({},{name:o.name},s)};n.playSpriteSheet=function(t,e,n){return"number"==typeof(n=void 0===n?"infinite":n)&&n<0&&(n="infinite"),"".concat(t," ").concat(e," steps(1) ").concat(n)},t.isBrowser&&(t=window).Keyframes&&(t.Keyframes.spriteSheet=n.spriteSheet,t.Keyframes.playSpriteSheet=n.playSpriteSheet)},{"./keyframes":3}]},{},[3]);