motion 10.0.1 → 10.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +23 -0
- package/dist/motion.min.js +1 -1
- package/dist/motion.umd.js +5 -8
- package/dist/size-animate-dom.js +1 -1
- package/dist/size-timeline-dom.js +1 -1
- package/dist/targets/dom/utils/controls.cjs.js +6 -8
- package/dist/targets/dom/utils/controls.es.js +6 -8
- package/package.json +1 -1
- package/types/targets/dom/utils/controls.d.ts +2 -2
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
Motion One adheres to [Semantic Versioning](http://semver.org/).
|
|
4
|
+
|
|
5
|
+
## [10.0.2] [2021-09-24]
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Generating `finished` promise on-demand.
|
|
10
|
+
|
|
11
|
+
### Fixed
|
|
12
|
+
|
|
13
|
+
- Catching promise in `animate` and `timeline` to prevent errors whenever a sub-animation is cancelled.
|
|
14
|
+
|
|
15
|
+
## [10.0.1] [2021-09-22]
|
|
16
|
+
|
|
17
|
+
### Change
|
|
18
|
+
|
|
19
|
+
- Removed links to repo from Readme.
|
|
20
|
+
|
|
21
|
+
## [10.0.0] [2021-09-12]
|
|
22
|
+
|
|
23
|
+
### First publish
|
package/dist/motion.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=new WeakMap;function n(t){return e.has(t)||e.set(t,{activeTransforms:[],activeAnimations:{}}),e.get(t)}function i(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const a=()=>{},s=t=>t,r=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},l={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:s},skew:c},u=new Map,f=t=>`--motion-${t}`,h=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{r.forEach((e=>{h.push(t+e),u.set(f(t+e),l[t])}))}));const p=(t,e)=>h.indexOf(t)-h.indexOf(e),
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Motion={})}(this,(function(t){"use strict";const e=new WeakMap;function n(t){return e.has(t)||e.set(t,{activeTransforms:[],activeAnimations:{}}),e.get(t)}function i(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const a=()=>{},s=t=>t,r=["","X","Y","Z"],o={x:"translateX",y:"translateY",z:"translateZ"},c={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},l={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:c,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:s},skew:c},u=new Map,f=t=>`--motion-${t}`,h=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{r.forEach((e=>{h.push(t+e),u.set(f(t+e),l[t])}))}));const p=(t,e)=>h.indexOf(t)-h.indexOf(e),m=new Set(h),y=t=>t.sort(p).reduce(d,"").trim(),d=(t,e)=>`${t} ${e}(var(${f(e)}))`,g=t=>t.startsWith("--"),v=new Set;const b=t=>1e3*t;function x(t){try{t.commitStyles(),t.cancel()}catch(t){}}const O=t=>Array.isArray(t)&&"number"!=typeof t[0],T=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S=t=>document.createElement("div").animate(t,{duration:.001}),M={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{S({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(S({opacity:[0,1]}).finished)},A={},j=Object.keys(M).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=M[e]()),A[e]),t)),{}),P={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},k=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function D(t,e,n,i){if(t===e&&n===i)return s;const a=e=>function(t,e,n,i,a){let s,r,o=0;do{r=e+(n-e)/2,s=k(r,i,a)-t,s>0?n=r:e=r}while(Math.abs(s)>1e-7&&++o<12);return r}(e,0,1,t,n);return t=>0===t||1===t?t:k(a(t),e,i)}var E=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},V=function(t,e,n){return-n*t+n*e+t},$=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,s,r=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(r):Math.ceil(r);return i=0,a=1,s=o/t,Math.min(Math.max(s,i),a)}};const R={ease:D(.25,.1,.25,1),"ease-in":D(.42,0,1,1),"ease-in-out":D(.42,0,.58,1),"ease-out":D(0,0,.58,1)},U=/\((.*?)\)/;function W(t){if("function"==typeof t)return t;if(Array.isArray(t))return D(...t);if(R[t])return R[t];if(t.startsWith("steps")){const e=U.exec(t);if(e){const t=e[1].split(",");return $(parseFloat(t[0]),t[1].trim())}}return s}function F(t,e){return O(t)?t[(n=0,i=t.length,a=e,s=i-n,((a-n)%s+s)%s+n)]:t;var n,i,a,s}function q(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=E(0,e,i);t.push(V(n,1,a))}}function C(t){const e=[0];return q(e,t-1),e}function z(t,e=C(t.length),n=s){const i=t.length,a=i-e.length;return a>0&&q(e,a),a=>{let s=0;for(;s<i-2&&!(a<e[s+1]);s++);let r=(o=E(e[s],e[s+1],a),Math.min(1,Math.max(o,0)));var o;return r=F(n,s)(r),V(t[s],t[s+1],r)}}class K{constructor(t,e,{easing:n=P.easing,duration:i=P.duration,delay:a=P.delay,endDelay:s=P.endDelay,offset:r,repeat:o=P.repeat,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=z(e,r,O(n)?n.map(W):W(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}this.pauseTime&&(e=this.pauseTime);let n=(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const r=n/i;let o=Math.floor(r),f=r%1;!f&&r>=1&&(f=1),1===f&&o--;const h=o%2;("reverse"===c||"alternate"===c&&h||"alternate-reverse"===c&&!h)&&(f=1-f);const p=n>=l?1:Math.min(f,1),m=u(p);t(m);n>=l+s?(this.playState="finished",this.resolve(m)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const X=(t,e)=>{let n=g(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=u.get(e);t&&(n=t.initialValue)}return n};const Y=t=>Array.isArray(t)?t:[t];function Z(t,e,i,s={}){let{duration:r=P.duration,delay:c=P.delay,endDelay:l=P.endDelay,repeat:h=P.repeat,easing:p=P.easing,direction:d,offset:w,allowWebkitAcceleration:S=!1}=s;const M=n(t);let A=j.waapi(),k=a;const D=(t=>m.has(t))(e);D&&(o[e]&&(e=o[e]),((t,e)=>{const{activeTransforms:i}=n(t);var a,s;s=e,-1===(a=i).indexOf(s)&&a.push(s),t.style.transform=y(i)})(t,e),e=f(e));const E=u.get(e);let V,$=function(t,e,n){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:X(e,n));return t}(Y(i),t,e);if(function(t,e){t.activeAnimations[e]&&(x(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(M,e),g(e)?(k=((t,e)=>n=>t.style.setProperty(e,n))(t,e),j.cssRegisterProperty()?function(t){if(!v.has(t)){v.add(t);try{const{syntax:e,initialValue:n}=u.has(t)?u.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(e):A=!1):k=((t,e)=>n=>t.style[e]=n)(t,e),A){E&&($=$.map((t=>"number"==typeof t?E.toDefaultUnit(t):t))),j.partialKeyframes()||1!==$.length||$.unshift(X(t,e));const n={delay:b(c),duration:b(r),endDelay:b(l),easing:O(p)?void 0:T(p),direction:d,iterations:h+1};V=t.animate({[e]:$,offset:w,easing:O(p)?p.map(T):void 0},n),V.finished||(V.finished=new Promise(((t,e)=>{V.onfinish=t,V.oncancel=e})));const i=$[$.length-1];V.finished.then((()=>k(i))).catch(a),S||(V.playbackRate=1.000001)}else if(D&&$.every(_)){if(1===$.length&&$.unshift(X(t,e)||(null==E?void 0:E.initialValue)||0),$=$.map((t=>"string"==typeof t?parseFloat(t):t)),E){const t=k;k=e=>t(E.toDefaultUnit(e))}V=function(t,e=[0,1],n={}){return new K(t,e,n)}(k,$,s)}else{const t=$[$.length-1];k(E&&"number"==typeof t?E.toDefaultUnit(t):t)}return M.activeAnimations[e]=V,V}const _=t=>"number"==typeof t,B=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function I(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t)}const G=t=>new Proxy({animations:t},H),H={get:(t,e)=>{var n,i;switch(e){case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(J)).catch(a)),t.finished;case"currentTime":const s=(null===(n=t.animations[0])||void 0===n?void 0:n[e])||0;return s?s/1e3:0;case"playbackRate":return null===(i=t.animations[0])||void 0===i?void 0:i[e];case"stop":return()=>t.animations.forEach(x);default:return()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=b(n);case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}},J=t=>t.finished;function L(t,e,n){return"function"==typeof t?t(e,n):t}function N(t,e,n,i){var a;return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(a=i.get(e))&&void 0!==a?a:t}function Q(t,e,n,a,s,r){!function(t,e,n){for(let a=0;a<t.length;a++){const s=t[a];s.at>e&&s.at<n&&(i(t,s),a--)}}(t,s,r);for(let i=0;i<e.length;i++)t.push({value:e[i],at:V(s,r,a[i]),easing:F(n,i)})}function tt(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function et(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function nt(t,e){return e[t]||(e[t]=[]),e[t]}t.animate=function(t,e,n={}){const i=[],a=(t=I(t)).length;for(let s=0;s<a;s++){const r=t[s];for(const t in e){const o=B(n,t);o.delay=L(o.delay,s,a);const c=Z(r,t,e[t],o);c&&i.push(c)}}return G(i)},t.animateStyle=Z,t.stagger=function(t=.1,{start:e=0,from:n=0,easing:i}={}){return(a,s)=>{const r="number"==typeof n?n:function(t,e){if("first"===t)return 0;{const n=e-1;return"last"===t?n:n/2}}(n,s),o=Math.abs(r-a);let c=t*o;if(i){const t=s*a;c=W(i)(c/t)*t}return e+c}},t.timeline=function(t,e={}){const n=[],i=function(t,e={}){var{defaultOptions:n={}}=e,i=function(t,e){var n={};for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&e.indexOf(i)<0&&(n[i]=t[i]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(i=Object.getOwnPropertySymbols(t);a<i.length;a++)e.indexOf(i[a])<0&&Object.prototype.propertyIsEnumerable.call(t,i[a])&&(n[i[a]]=t[i[a]])}return n}(e,["defaultOptions"]);const a=[],s=new Map,r={},o=new Map;let c=0,l=0,u=0;for(let e=0;e<t.length;e++){const[i,a,f={}]=t[e];void 0!==f.at&&(l=N(l,f.at,c,o));let h=0;const p=I(i,r),m=p.length;for(let t=0;t<m;t++){const e=et(p[t],s);for(const i in a){const s=nt(i,e),r=Y(a[i]),o=B(f,i),{duration:c=n.duration||P.duration,easing:p=n.easing||P.easing,offset:y=C(r.length)}=o,d=L(f.delay,t,m)||0,g=l+d,v=g+c;1===y.length&&0===y[0]&&(y[1]=1);const b=length-r.length;b>0&&q(y,b),1===r.length&&r.unshift(null),Q(s,r,p,y,g,v),h=Math.max(d+c,h),u=Math.max(v,u)}}c=l,l+=h}return s.forEach(((t,e)=>{for(const s in t){const r=t[s];r.sort(tt);const o=[],c=[],l=[];for(let t=0;t<r.length;t++){const{at:e,value:n,easing:i}=r[t];o.push(n),c.push(E(0,u,e)),l.push(i||P.easing)}1!==c[c.length-1]&&(c.push(1),o.push(null)),a.push([e,s,o,Object.assign(Object.assign(Object.assign({},n),{duration:u,easing:l,offset:c}),i)])}})),a}(t,e);for(let t=0;t<i.length;t++){const e=Z(...i[t]);e&&n.push(e)}return G(n)},Object.defineProperty(t,"__esModule",{value:!0})}));
|
package/dist/motion.umd.js
CHANGED
|
@@ -642,19 +642,15 @@
|
|
|
642
642
|
return Array.from(elements);
|
|
643
643
|
}
|
|
644
644
|
|
|
645
|
-
|
|
646
|
-
// TODO Duplication with animate
|
|
647
|
-
const state = {
|
|
648
|
-
animations,
|
|
649
|
-
finished: Promise.all(animations.map((animation) => animation.finished)),
|
|
650
|
-
};
|
|
651
|
-
return new Proxy(state, controls);
|
|
652
|
-
}
|
|
645
|
+
const createAnimationControls = (animations) => new Proxy({ animations }, controls);
|
|
653
646
|
const controls = {
|
|
654
647
|
get: (target, key) => {
|
|
655
648
|
var _a, _b;
|
|
656
649
|
switch (key) {
|
|
657
650
|
case "finished":
|
|
651
|
+
if (!target.finished) {
|
|
652
|
+
target.finished = Promise.all(target.animations.map(selectFinished)).catch(noop);
|
|
653
|
+
}
|
|
658
654
|
return target.finished;
|
|
659
655
|
case "currentTime":
|
|
660
656
|
// TODO Find first active animation
|
|
@@ -683,6 +679,7 @@
|
|
|
683
679
|
return false;
|
|
684
680
|
},
|
|
685
681
|
};
|
|
682
|
+
const selectFinished = (animation) => animation.finished;
|
|
686
683
|
|
|
687
684
|
function stagger(duration = 0.1, { start = 0, from = 0, easing } = {}) {
|
|
688
685
|
return (i, total) => {
|
package/dist/size-animate-dom.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
const t=new WeakMap;function e(e){return t.has(e)||t.set(e,{activeTransforms:[],activeAnimations:{}}),t.get(e)}const n=()=>{},i=t=>t,a=["","X","Y","Z"],r={x:"translateX",y:"translateY",z:"translateZ"},s={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},o={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:s,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:i},skew:s},c=new Map,l=t=>`--motion-${t}`,u=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{a.forEach((e=>{u.push(t+e),c.set(l(t+e),o[t])}))}));const h=(t,e)=>u.indexOf(t)-u.indexOf(e),f=new Set(u),m=t=>t.sort(h).reduce(y,"").trim(),y=(t,e)=>`${t} ${e}(var(${l(e)}))`,p=t=>t.startsWith("--"),d=new Set;const g=t=>1e3*t;function v(t){try{t.commitStyles(),t.cancel()}catch(t){}}const T=t=>Array.isArray(t)&&"number"!=typeof t[0],b=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S=t=>document.createElement("div").animate(t,{duration:.001}),x={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{S({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(S({opacity:[0,1]}).finished)},A={},k=Object.keys(x).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=x[e]()),A[e]),t)),{}),M={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},D=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function P(t,e,n,a){if(t===e&&n===a)return i;const r=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=D(s,i,a)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:D(r(t),e,a)}var O=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},j=function(t,e,n){return-n*t+n*e+t},V=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const $={ease:P(.25,.1,.25,1),"ease-in":P(.42,0,1,1),"ease-in-out":P(.42,0,.58,1),"ease-out":P(0,0,.58,1)},E=/\((.*?)\)/;function R(t){if("function"==typeof t)return t;if(Array.isArray(t))return P(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=E.exec(t);if(e){const t=e[1].split(",");return V(parseFloat(t[0]),t[1].trim())}}return i}function U(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=O(0,e,i);t.push(j(n,1,a))}}function q(t,e=function(t){const e=[0];return U(e,t-1),e}(t.length),n=i){const a=t.length,r=a-e.length;return r>0&&U(e,r),i=>{let r=0;for(;r<a-2&&!(i<e[r+1]);r++);let s=(o=O(e[r],e[r+1],i),Math.min(1,Math.max(o,0)));var o;return s=function(t,e){return T(t)?t[(n=0,i=t.length,a=e,r=i-n,((a-n)%r+r)%r+n)]:t;var n,i,a,r}(n,r)(s),j(t[r],t[r+1],s)}}class C{constructor(t,e,{easing:n=M.easing,duration:i=M.duration,delay:a=M.delay,endDelay:r=M.endDelay,offset:s,repeat:o=M.repeat,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=q(e,s,T(n)?n.map(R):R(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}this.pauseTime&&(e=this.pauseTime);let n=(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const m=n>=l?1:Math.min(h,1),y=u(m);t(y);n>=l+r?(this.playState="finished",this.resolve(y)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const F=(t,e)=>{let n=p(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=c.get(e);t&&(n=t.initialValue)}return n};function W(t,i,a,s={}){let{duration:o=M.duration,delay:u=M.delay,endDelay:h=M.endDelay,repeat:y=M.repeat,easing:w=M.easing,direction:S,offset:x,allowWebkitAcceleration:A=!1}=s;const D=e(t);let P=k.waapi(),O=n;const j=(t=>f.has(t))(i);j&&(r[i]&&(i=r[i]),((t,n)=>{const{activeTransforms:i}=e(t);var a,r;r=n,-1===(a=i).indexOf(r)&&a.push(r),t.style.transform=m(i)})(t,i),i=l(i));const V=c.get(i);let $,E=function(t,e,n){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:F(e,n));return t}((t=>Array.isArray(t)?t:[t])(a),t,i);if(function(t,e){t.activeAnimations[e]&&(v(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(D,i),p(i)?(O=((t,e)=>n=>t.style.setProperty(e,n))(t,i),k.cssRegisterProperty()?function(t){if(!d.has(t)){d.add(t);try{const{syntax:e,initialValue:n}=c.has(t)?c.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(i):P=!1):O=((t,e)=>n=>t.style[e]=n)(t,i),P){V&&(E=E.map((t=>"number"==typeof t?V.toDefaultUnit(t):t))),k.partialKeyframes()||1!==E.length||E.unshift(F(t,i));const e={delay:g(u),duration:g(o),endDelay:g(h),easing:T(w)?void 0:b(w),direction:S,iterations:y+1};$=t.animate({[i]:E,offset:x,easing:T(w)?w.map(b):void 0},e),$.finished||($.finished=new Promise(((t,e)=>{$.onfinish=t,$.oncancel=e})));const a=E[E.length-1];$.finished.then((()=>O(a))).catch(n),A||($.playbackRate=1.000001)}else if(j&&E.every(z)){if(1===E.length&&E.unshift(F(t,i)||(null==V?void 0:V.initialValue)||0),E=E.map((t=>"string"==typeof t?parseFloat(t):t)),V){const t=O;O=e=>t(V.toDefaultUnit(e))}$=function(t,e=[0,1],n={}){return new C(t,e,n)}(O,E,s)}else{const t=E[E.length-1];O(V&&"number"==typeof t?V.toDefaultUnit(t):t)}return D.activeAnimations[i]=$,$}const z=t=>"number"==typeof t,K=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);const X={get:(t,e)=>{var
|
|
1
|
+
const t=new WeakMap;function e(e){return t.has(e)||t.set(e,{activeTransforms:[],activeAnimations:{}}),t.get(e)}const n=()=>{},i=t=>t,a=["","X","Y","Z"],r={x:"translateX",y:"translateY",z:"translateZ"},s={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},o={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:s,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:i},skew:s},c=new Map,l=t=>`--motion-${t}`,u=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{a.forEach((e=>{u.push(t+e),c.set(l(t+e),o[t])}))}));const h=(t,e)=>u.indexOf(t)-u.indexOf(e),f=new Set(u),m=t=>t.sort(h).reduce(y,"").trim(),y=(t,e)=>`${t} ${e}(var(${l(e)}))`,p=t=>t.startsWith("--"),d=new Set;const g=t=>1e3*t;function v(t){try{t.commitStyles(),t.cancel()}catch(t){}}const T=t=>Array.isArray(t)&&"number"!=typeof t[0],b=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?w(t):t,w=([t,e,n,i])=>`cubic-bezier(${t}, ${e}, ${n}, ${i})`,S=t=>document.createElement("div").animate(t,{duration:.001}),x={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{S({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(S({opacity:[0,1]}).finished)},A={},k=Object.keys(x).reduce(((t,e)=>(t[e]=()=>(void 0===A[e]&&(A[e]=x[e]()),A[e]),t)),{}),M={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},D=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function P(t,e,n,a){if(t===e&&n===a)return i;const r=e=>function(t,e,n,i,a){let r,s,o=0;do{s=e+(n-e)/2,r=D(s,i,a)-t,r>0?n=s:e=s}while(Math.abs(r)>1e-7&&++o<12);return s}(e,0,1,t,n);return t=>0===t||1===t?t:D(r(t),e,a)}var O=function(t,e,n){var i=e-t;return 0===i?1:(n-t)/i},j=function(t,e,n){return-n*t+n*e+t},V=function(t,e){return void 0===e&&(e="end"),function(n){var i,a,r,s=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(s):Math.ceil(s);return i=0,a=1,r=o/t,Math.min(Math.max(r,i),a)}};const $={ease:P(.25,.1,.25,1),"ease-in":P(.42,0,1,1),"ease-in-out":P(.42,0,.58,1),"ease-out":P(0,0,.58,1)},E=/\((.*?)\)/;function R(t){if("function"==typeof t)return t;if(Array.isArray(t))return P(...t);if($[t])return $[t];if(t.startsWith("steps")){const e=E.exec(t);if(e){const t=e[1].split(",");return V(parseFloat(t[0]),t[1].trim())}}return i}function U(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const a=O(0,e,i);t.push(j(n,1,a))}}function q(t,e=function(t){const e=[0];return U(e,t-1),e}(t.length),n=i){const a=t.length,r=a-e.length;return r>0&&U(e,r),i=>{let r=0;for(;r<a-2&&!(i<e[r+1]);r++);let s=(o=O(e[r],e[r+1],i),Math.min(1,Math.max(o,0)));var o;return s=function(t,e){return T(t)?t[(n=0,i=t.length,a=e,r=i-n,((a-n)%r+r)%r+n)]:t;var n,i,a,r}(n,r)(s),j(t[r],t[r+1],s)}}class C{constructor(t,e,{easing:n=M.easing,duration:i=M.duration,delay:a=M.delay,endDelay:r=M.endDelay,offset:s,repeat:o=M.repeat,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const l=i*(o+1),u=q(e,s,T(n)?n.map(R):R(n));this.tick=e=>{if("finished"===this.playState){const e=u(1);return t(e),void this.resolve(e)}this.pauseTime&&(e=this.pauseTime);let n=(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-a,0);const s=n/i;let o=Math.floor(s),h=s%1;!h&&s>=1&&(h=1),1===h&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(h=1-h);const m=n>=l?1:Math.min(h,1),y=u(m);t(y);n>=l+r?(this.playState="finished",this.resolve(y)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const F=(t,e)=>{let n=p(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=c.get(e);t&&(n=t.initialValue)}return n};function W(t,i,a,s={}){let{duration:o=M.duration,delay:u=M.delay,endDelay:h=M.endDelay,repeat:y=M.repeat,easing:w=M.easing,direction:S,offset:x,allowWebkitAcceleration:A=!1}=s;const D=e(t);let P=k.waapi(),O=n;const j=(t=>f.has(t))(i);j&&(r[i]&&(i=r[i]),((t,n)=>{const{activeTransforms:i}=e(t);var a,r;r=n,-1===(a=i).indexOf(r)&&a.push(r),t.style.transform=m(i)})(t,i),i=l(i));const V=c.get(i);let $,E=function(t,e,n){for(let i=0;i<t.length;i++)null===t[i]&&(t[i]=i?t[i-1]:F(e,n));return t}((t=>Array.isArray(t)?t:[t])(a),t,i);if(function(t,e){t.activeAnimations[e]&&(v(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(D,i),p(i)?(O=((t,e)=>n=>t.style.setProperty(e,n))(t,i),k.cssRegisterProperty()?function(t){if(!d.has(t)){d.add(t);try{const{syntax:e,initialValue:n}=c.has(t)?c.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(i):P=!1):O=((t,e)=>n=>t.style[e]=n)(t,i),P){V&&(E=E.map((t=>"number"==typeof t?V.toDefaultUnit(t):t))),k.partialKeyframes()||1!==E.length||E.unshift(F(t,i));const e={delay:g(u),duration:g(o),endDelay:g(h),easing:T(w)?void 0:b(w),direction:S,iterations:y+1};$=t.animate({[i]:E,offset:x,easing:T(w)?w.map(b):void 0},e),$.finished||($.finished=new Promise(((t,e)=>{$.onfinish=t,$.oncancel=e})));const a=E[E.length-1];$.finished.then((()=>O(a))).catch(n),A||($.playbackRate=1.000001)}else if(j&&E.every(z)){if(1===E.length&&E.unshift(F(t,i)||(null==V?void 0:V.initialValue)||0),E=E.map((t=>"string"==typeof t?parseFloat(t):t)),V){const t=O;O=e=>t(V.toDefaultUnit(e))}$=function(t,e=[0,1],n={}){return new C(t,e,n)}(O,E,s)}else{const t=E[E.length-1];O(V&&"number"==typeof t?V.toDefaultUnit(t):t)}return D.activeAnimations[i]=$,$}const z=t=>"number"==typeof t,K=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);const X={get:(t,e)=>{var i,a;switch(e){case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(Y)).catch(n)),t.finished;case"currentTime":const r=(null===(i=t.animations[0])||void 0===i?void 0:i[e])||0;return r?r/1e3:0;case"playbackRate":return null===(a=t.animations[0])||void 0===a?void 0:a[e];case"stop":return()=>t.animations.forEach(v);default:return()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=g(n);case"currentTime":case"playbackRate":for(let i=0;i<t.animations.length;i++)t.animations[i][e]=n;return!0}return!1}},Y=t=>t.finished;function Z(t,e,n){return"function"==typeof t?t(e,n):t}function B(t,e,n={}){const i=[],a=(t=function(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t)}(t)).length;for(let r=0;r<a;r++){const s=t[r];for(const t in e){const o=K(n,t);o.delay=Z(o.delay,r,a);const c=W(s,t,e[t],o);c&&i.push(c)}}return(t=>new Proxy({animations:t},X))(i)}export{B as animate};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
var t=function(t,e,n){var a=e-t;return 0===a?1:(n-t)/a},e=function(t,e,n){return-n*t+n*e+t},n=function(t,e){return void 0===e&&(e="end"),function(n){var a,i,s,r=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(r):Math.ceil(r);return a=0,i=1,s=o/t,Math.min(Math.max(s,a),i)}};const a=()=>{},i=t=>t,s=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function r(t,e,n,a){if(t===e&&n===a)return i;const r=e=>function(t,e,n,a,i){let r,o,c=0;do{o=e+(n-e)/2,r=s(o,a,i)-t,r>0?n=o:e=o}while(Math.abs(r)>1e-7&&++c<12);return o}(e,0,1,t,n);return t=>0===t||1===t?t:s(r(t),e,a)}const o={ease:r(.25,.1,.25,1),"ease-in":r(.42,0,1,1),"ease-in-out":r(.42,0,.58,1),"ease-out":r(0,0,.58,1)},c=/\((.*?)\)/;function l(t){if("function"==typeof t)return t;if(Array.isArray(t))return r(...t);if(o[t])return o[t];if(t.startsWith("steps")){const e=c.exec(t);if(e){const t=e[1].split(",");return n(parseFloat(t[0]),t[1].trim())}}return i}function u(t,e,n){return"function"==typeof t?t(e,n):t}function h(n,a){const i=n[n.length-1];for(let s=1;s<=a;s++){const r=t(0,a,s);n.push(e(i,1,r))}}function f(t){const e=[0];return h(e,t-1),e}const p=new WeakMap;function m(t){return p.has(t)||p.set(t,{activeTransforms:[],activeAnimations:{}}),p.get(t)}function y(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const d=["","X","Y","Z"],g={x:"translateX",y:"translateY",z:"translateZ"},v={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},b={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:v,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:i},skew:v},w=new Map,O=t=>`--motion-${t}`,x=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{d.forEach((e=>{x.push(t+e),w.set(O(t+e),b[t])}))}));const T=(t,e)=>x.indexOf(t)-x.indexOf(e),S=new Set(x),A=t=>t.sort(T).reduce(M,"").trim(),M=(t,e)=>`${t} ${e}(var(${O(e)}))`,j=t=>t.startsWith("--"),k=new Set;const P=t=>1e3*t;function D(t){try{t.commitStyles(),t.cancel()}catch(t){}}const E=t=>Array.isArray(t)&&"number"!=typeof t[0],V=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?$(t):t,$=([t,e,n,a])=>`cubic-bezier(${t}, ${e}, ${n}, ${a})`,R=t=>document.createElement("div").animate(t,{duration:.001}),U={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{R({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(R({opacity:[0,1]}).finished)},W={},F=Object.keys(U).reduce(((t,e)=>(t[e]=()=>(void 0===W[e]&&(W[e]=U[e]()),W[e]),t)),{}),q={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"};function C(t,e){return E(t)?t[(n=0,a=t.length,i=e,s=a-n,((i-n)%s+s)%s+n)]:t;var n,a,i,s}function z(n,a=f(n.length),s=i){const r=n.length,o=r-a.length;return o>0&&h(a,o),i=>{let o=0;for(;o<r-2&&!(i<a[o+1]);o++);let c=(l=t(a[o],a[o+1],i),Math.min(1,Math.max(l,0)));var l;return c=C(s,o)(c),e(n[o],n[o+1],c)}}class K{constructor(t,e,{easing:n=q.easing,duration:a=q.duration,delay:i=q.delay,endDelay:s=q.endDelay,offset:r,repeat:o=q.repeat,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const u=a*(o+1),h=z(e,r,E(n)?n.map(l):l(n));this.tick=e=>{if("finished"===this.playState){const e=h(1);return t(e),void this.resolve(e)}this.pauseTime&&(e=this.pauseTime);let n=(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-i,0);const r=n/a;let o=Math.floor(r),l=r%1;!l&&r>=1&&(l=1),1===l&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(l=1-l);const p=n>=u?1:Math.min(l,1),m=h(p);t(m);n>=u+s?(this.playState="finished",this.resolve(m)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const X=(t,e)=>{let n=j(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=w.get(e);t&&(n=t.initialValue)}return n};const Y=t=>Array.isArray(t)?t:[t];function Z(t,e,n,i={}){let{duration:s=q.duration,delay:r=q.delay,endDelay:o=q.endDelay,repeat:c=q.repeat,easing:l=q.easing,direction:u,offset:h,allowWebkitAcceleration:f=!1}=i;const p=m(t);let y=F.waapi(),d=a;const v=(t=>S.has(t))(e);v&&(g[e]&&(e=g[e]),((t,e)=>{const{activeTransforms:n}=m(t);var a,i;i=e,-1===(a=n).indexOf(i)&&a.push(i),t.style.transform=A(n)})(t,e),e=O(e));const b=w.get(e);let x,T=function(t,e,n){for(let a=0;a<t.length;a++)null===t[a]&&(t[a]=a?t[a-1]:X(e,n));return t}(Y(n),t,e);if(function(t,e){t.activeAnimations[e]&&(D(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(p,e),j(e)?(d=((t,e)=>n=>t.style.setProperty(e,n))(t,e),F.cssRegisterProperty()?function(t){if(!k.has(t)){k.add(t);try{const{syntax:e,initialValue:n}=w.has(t)?w.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(e):y=!1):d=((t,e)=>n=>t.style[e]=n)(t,e),y){b&&(T=T.map((t=>"number"==typeof t?b.toDefaultUnit(t):t))),F.partialKeyframes()||1!==T.length||T.unshift(X(t,e));const n={delay:P(r),duration:P(s),endDelay:P(o),easing:E(l)?void 0:V(l),direction:u,iterations:c+1};x=t.animate({[e]:T,offset:h,easing:E(l)?l.map(V):void 0},n),x.finished||(x.finished=new Promise(((t,e)=>{x.onfinish=t,x.oncancel=e})));const i=T[T.length-1];x.finished.then((()=>d(i))).catch(a),f||(x.playbackRate=1.000001)}else if(v&&T.every(B)){if(1===T.length&&T.unshift(X(t,e)||(null==b?void 0:b.initialValue)||0),T=T.map((t=>"string"==typeof t?parseFloat(t):t)),b){const t=d;d=e=>t(b.toDefaultUnit(e))}x=function(t,e=[0,1],n={}){return new K(t,e,n)}(d,T,i)}else{const t=T[T.length-1];d(b&&"number"==typeof t?b.toDefaultUnit(t):t)}return p.activeAnimations[e]=x,x}const B=t=>"number"==typeof t
|
|
1
|
+
var t=function(t,e,n){var a=e-t;return 0===a?1:(n-t)/a},e=function(t,e,n){return-n*t+n*e+t},n=function(t,e){return void 0===e&&(e="end"),function(n){var a,i,s,r=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,o="end"===e?Math.floor(r):Math.ceil(r);return a=0,i=1,s=o/t,Math.min(Math.max(s,a),i)}};const a=()=>{},i=t=>t,s=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function r(t,e,n,a){if(t===e&&n===a)return i;const r=e=>function(t,e,n,a,i){let r,o,c=0;do{o=e+(n-e)/2,r=s(o,a,i)-t,r>0?n=o:e=o}while(Math.abs(r)>1e-7&&++c<12);return o}(e,0,1,t,n);return t=>0===t||1===t?t:s(r(t),e,a)}const o={ease:r(.25,.1,.25,1),"ease-in":r(.42,0,1,1),"ease-in-out":r(.42,0,.58,1),"ease-out":r(0,0,.58,1)},c=/\((.*?)\)/;function l(t){if("function"==typeof t)return t;if(Array.isArray(t))return r(...t);if(o[t])return o[t];if(t.startsWith("steps")){const e=c.exec(t);if(e){const t=e[1].split(",");return n(parseFloat(t[0]),t[1].trim())}}return i}function u(t,e,n){return"function"==typeof t?t(e,n):t}function h(n,a){const i=n[n.length-1];for(let s=1;s<=a;s++){const r=t(0,a,s);n.push(e(i,1,r))}}function f(t){const e=[0];return h(e,t-1),e}const p=new WeakMap;function m(t){return p.has(t)||p.set(t,{activeTransforms:[],activeAnimations:{}}),p.get(t)}function y(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}const d=["","X","Y","Z"],g={x:"translateX",y:"translateY",z:"translateZ"},v={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},b={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:v,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:i},skew:v},w=new Map,O=t=>`--motion-${t}`,x=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{d.forEach((e=>{x.push(t+e),w.set(O(t+e),b[t])}))}));const T=(t,e)=>x.indexOf(t)-x.indexOf(e),S=new Set(x),A=t=>t.sort(T).reduce(M,"").trim(),M=(t,e)=>`${t} ${e}(var(${O(e)}))`,j=t=>t.startsWith("--"),k=new Set;const P=t=>1e3*t;function D(t){try{t.commitStyles(),t.cancel()}catch(t){}}const E=t=>Array.isArray(t)&&"number"!=typeof t[0],V=t=>(t=>Array.isArray(t)&&"number"==typeof t[0])(t)?$(t):t,$=([t,e,n,a])=>`cubic-bezier(${t}, ${e}, ${n}, ${a})`,R=t=>document.createElement("div").animate(t,{duration:.001}),U={cssRegisterProperty:()=>"undefined"!=typeof CSS&&Object.hasOwnProperty.call(CSS,"registerProperty"),waapi:()=>Object.hasOwnProperty.call(Element.prototype,"animate"),partialKeyframes:()=>{try{R({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(R({opacity:[0,1]}).finished)},W={},F=Object.keys(U).reduce(((t,e)=>(t[e]=()=>(void 0===W[e]&&(W[e]=U[e]()),W[e]),t)),{}),q={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"};function C(t,e){return E(t)?t[(n=0,a=t.length,i=e,s=a-n,((i-n)%s+s)%s+n)]:t;var n,a,i,s}function z(n,a=f(n.length),s=i){const r=n.length,o=r-a.length;return o>0&&h(a,o),i=>{let o=0;for(;o<r-2&&!(i<a[o+1]);o++);let c=(l=t(a[o],a[o+1],i),Math.min(1,Math.max(l,0)));var l;return c=C(s,o)(c),e(n[o],n[o+1],c)}}class K{constructor(t,e,{easing:n=q.easing,duration:a=q.duration,delay:i=q.delay,endDelay:s=q.endDelay,offset:r,repeat:o=q.repeat,direction:c="normal"}){this.startTime=0,this.rate=1,this.t=0,this.cancelT=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const u=a*(o+1),h=z(e,r,E(n)?n.map(l):l(n));this.tick=e=>{if("finished"===this.playState){const e=h(1);return t(e),void this.resolve(e)}this.pauseTime&&(e=this.pauseTime);let n=(e-this.startTime)*this.rate;this.t=n,n/=1e3,n=Math.max(n-i,0);const r=n/a;let o=Math.floor(r),l=r%1;!l&&r>=1&&(l=1),1===l&&o--;const f=o%2;("reverse"===c||"alternate"===c&&f||"alternate-reverse"===c&&!f)&&(l=1-l);const p=n>=u?1:Math.min(l,1),m=h(p);t(m);n>=u+s?(this.playState="finished",this.resolve(m)):"idle"!==this.playState&&requestAnimationFrame(this.tick)},this.play()}play(){const t=performance.now();this.playState="running",this.pauseTime?this.startTime=t-(this.pauseTime-this.startTime):this.startTime||(this.startTime=t),this.pauseTime=void 0,requestAnimationFrame(this.tick)}pause(){this.playState="paused",this.pauseTime=performance.now()}finish(){this.playState="finished",this.tick(0)}cancel(){this.playState="idle",this.tick(this.cancelT),this.reject(!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelT=this.t}get currentTime(){return this.t}set currentTime(t){this.pauseTime||0===this.rate?this.pauseTime=t:this.startTime=performance.now()-t/this.rate}get playbackRate(){return this.rate}set playbackRate(t){this.rate=t}}const X=(t,e)=>{let n=j(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=w.get(e);t&&(n=t.initialValue)}return n};const Y=t=>Array.isArray(t)?t:[t];function Z(t,e,n,i={}){let{duration:s=q.duration,delay:r=q.delay,endDelay:o=q.endDelay,repeat:c=q.repeat,easing:l=q.easing,direction:u,offset:h,allowWebkitAcceleration:f=!1}=i;const p=m(t);let y=F.waapi(),d=a;const v=(t=>S.has(t))(e);v&&(g[e]&&(e=g[e]),((t,e)=>{const{activeTransforms:n}=m(t);var a,i;i=e,-1===(a=n).indexOf(i)&&a.push(i),t.style.transform=A(n)})(t,e),e=O(e));const b=w.get(e);let x,T=function(t,e,n){for(let a=0;a<t.length;a++)null===t[a]&&(t[a]=a?t[a-1]:X(e,n));return t}(Y(n),t,e);if(function(t,e){t.activeAnimations[e]&&(D(t.activeAnimations[e]),t.activeAnimations[e]=void 0)}(p,e),j(e)?(d=((t,e)=>n=>t.style.setProperty(e,n))(t,e),F.cssRegisterProperty()?function(t){if(!k.has(t)){k.add(t);try{const{syntax:e,initialValue:n}=w.has(t)?w.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}(e):y=!1):d=((t,e)=>n=>t.style[e]=n)(t,e),y){b&&(T=T.map((t=>"number"==typeof t?b.toDefaultUnit(t):t))),F.partialKeyframes()||1!==T.length||T.unshift(X(t,e));const n={delay:P(r),duration:P(s),endDelay:P(o),easing:E(l)?void 0:V(l),direction:u,iterations:c+1};x=t.animate({[e]:T,offset:h,easing:E(l)?l.map(V):void 0},n),x.finished||(x.finished=new Promise(((t,e)=>{x.onfinish=t,x.oncancel=e})));const i=T[T.length-1];x.finished.then((()=>d(i))).catch(a),f||(x.playbackRate=1.000001)}else if(v&&T.every(B)){if(1===T.length&&T.unshift(X(t,e)||(null==b?void 0:b.initialValue)||0),T=T.map((t=>"string"==typeof t?parseFloat(t):t)),b){const t=d;d=e=>t(b.toDefaultUnit(e))}x=function(t,e=[0,1],n={}){return new K(t,e,n)}(d,T,i)}else{const t=T[T.length-1];d(b&&"number"==typeof t?b.toDefaultUnit(t):t)}return p.activeAnimations[e]=x,x}const B=t=>"number"==typeof t,I={get:(t,e)=>{var n,i;switch(e){case"finished":return t.finished||(t.finished=Promise.all(t.animations.map(G)).catch(a)),t.finished;case"currentTime":const s=(null===(n=t.animations[0])||void 0===n?void 0:n[e])||0;return s?s/1e3:0;case"playbackRate":return null===(i=t.animations[0])||void 0===i?void 0:i[e];case"stop":return()=>t.animations.forEach(D);default:return()=>t.animations.forEach((t=>t[e]()))}},set:(t,e,n)=>{switch(e){case"currentTime":n=P(n);case"currentTime":case"playbackRate":for(let a=0;a<t.animations.length;a++)t.animations[a][e]=n;return!0}return!1}},G=t=>t.finished,H=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function J(t,e){var n;return"string"==typeof t?e?(null!==(n=e[t])&&void 0!==n||(e[t]=document.querySelectorAll(t)),t=e[t]):t=document.querySelectorAll(t):t instanceof Element&&(t=[t]),Array.from(t)}function L(t,e,n,a){var i;return"number"==typeof e?e:e.startsWith("-")||e.startsWith("+")?Math.max(0,t+parseFloat(e)):"<"===e?n:null!==(i=a.get(e))&&void 0!==i?i:t}function N(t,n,a,i,s,r){!function(t,e,n){for(let a=0;a<t.length;a++){const i=t[a];i.at>e&&i.at<n&&(y(t,i),a--)}}(t,s,r);for(let o=0;o<n.length;o++)t.push({value:n[o],at:e(s,r,i[o]),easing:C(a,o)})}function Q(t,e){return t.at===e.at?null===t.value?1:-1:t.at-e.at}function _(t,e={}){const n=[],a=tt(t,e);for(let t=0;t<a.length;t++){const e=Z(...a[t]);e&&n.push(e)}return(t=>new Proxy({animations:t},I))(n)}function tt(e,n={}){var{defaultOptions:a={}}=n,i=function(t,e){var n={};for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&e.indexOf(a)<0&&(n[a]=t[a]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var i=0;for(a=Object.getOwnPropertySymbols(t);i<a.length;i++)e.indexOf(a[i])<0&&Object.prototype.propertyIsEnumerable.call(t,a[i])&&(n[a[i]]=t[a[i]])}return n}(n,["defaultOptions"]);const s=[],r=new Map,o={},c=new Map;let l=0,p=0,m=0;for(let t=0;t<e.length;t++){const[n,i,s={}]=e[t];void 0!==s.at&&(p=L(p,s.at,l,c));let y=0;const d=J(n,o),g=d.length;for(let t=0;t<g;t++){const e=et(d[t],r);for(const n in i){const r=nt(n,e),o=Y(i[n]),c=H(s,n),{duration:l=a.duration||q.duration,easing:d=a.easing||q.easing,offset:v=f(o.length)}=c,b=u(s.delay,t,g)||0,w=p+b,O=w+l;1===v.length&&0===v[0]&&(v[1]=1);const x=length-o.length;x>0&&h(v,x),1===o.length&&o.unshift(null),N(r,o,d,v,w,O),y=Math.max(b+l,y),m=Math.max(O,m)}}l=p,p+=y}return r.forEach(((e,n)=>{for(const r in e){const o=e[r];o.sort(Q);const c=[],l=[],u=[];for(let e=0;e<o.length;e++){const{at:n,value:a,easing:i}=o[e];c.push(a),l.push(t(0,m,n)),u.push(i||q.easing)}1!==l[l.length-1]&&(l.push(1),c.push(null)),s.push([n,r,c,Object.assign(Object.assign(Object.assign({},a),{duration:m,easing:u,offset:l}),i)])}})),s}function et(t,e){return!e.has(t)&&e.set(t,{}),e.get(t)}function nt(t,e){return e[t]||(e[t]=[]),e[t]}export{tt as createAnimationsFromTimeline,_ as timeline};
|
|
@@ -2,22 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
+
var noop = require('../../../utils/noop.cjs.js');
|
|
5
6
|
var stopAnimation = require('./stop-animation.cjs.js');
|
|
6
7
|
var time = require('./time.cjs.js');
|
|
7
8
|
|
|
8
|
-
|
|
9
|
-
// TODO Duplication with animate
|
|
10
|
-
const state = {
|
|
11
|
-
animations,
|
|
12
|
-
finished: Promise.all(animations.map((animation) => animation.finished)),
|
|
13
|
-
};
|
|
14
|
-
return new Proxy(state, controls);
|
|
15
|
-
}
|
|
9
|
+
const createAnimationControls = (animations) => new Proxy({ animations }, controls);
|
|
16
10
|
const controls = {
|
|
17
11
|
get: (target, key) => {
|
|
18
12
|
var _a, _b;
|
|
19
13
|
switch (key) {
|
|
20
14
|
case "finished":
|
|
15
|
+
if (!target.finished) {
|
|
16
|
+
target.finished = Promise.all(target.animations.map(selectFinished)).catch(noop.noop);
|
|
17
|
+
}
|
|
21
18
|
return target.finished;
|
|
22
19
|
case "currentTime":
|
|
23
20
|
// TODO Find first active animation
|
|
@@ -46,6 +43,7 @@ const controls = {
|
|
|
46
43
|
return false;
|
|
47
44
|
},
|
|
48
45
|
};
|
|
46
|
+
const selectFinished = (animation) => animation.finished;
|
|
49
47
|
|
|
50
48
|
exports.controls = controls;
|
|
51
49
|
exports.createAnimationControls = createAnimationControls;
|
|
@@ -1,19 +1,16 @@
|
|
|
1
|
+
import { noop } from '../../../utils/noop.es.js';
|
|
1
2
|
import { stopAnimation } from './stop-animation.es.js';
|
|
2
3
|
import { ms } from './time.es.js';
|
|
3
4
|
|
|
4
|
-
|
|
5
|
-
// TODO Duplication with animate
|
|
6
|
-
const state = {
|
|
7
|
-
animations,
|
|
8
|
-
finished: Promise.all(animations.map((animation) => animation.finished)),
|
|
9
|
-
};
|
|
10
|
-
return new Proxy(state, controls);
|
|
11
|
-
}
|
|
5
|
+
const createAnimationControls = (animations) => new Proxy({ animations }, controls);
|
|
12
6
|
const controls = {
|
|
13
7
|
get: (target, key) => {
|
|
14
8
|
var _a, _b;
|
|
15
9
|
switch (key) {
|
|
16
10
|
case "finished":
|
|
11
|
+
if (!target.finished) {
|
|
12
|
+
target.finished = Promise.all(target.animations.map(selectFinished)).catch(noop);
|
|
13
|
+
}
|
|
17
14
|
return target.finished;
|
|
18
15
|
case "currentTime":
|
|
19
16
|
// TODO Find first active animation
|
|
@@ -42,5 +39,6 @@ const controls = {
|
|
|
42
39
|
return false;
|
|
43
40
|
},
|
|
44
41
|
};
|
|
42
|
+
const selectFinished = (animation) => animation.finished;
|
|
45
43
|
|
|
46
44
|
export { controls, createAnimationControls };
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { AnimationControls, AnimationWithCommitStyles } from "../types";
|
|
2
2
|
interface AnimationState {
|
|
3
3
|
animations: AnimationWithCommitStyles[];
|
|
4
|
-
finished
|
|
4
|
+
finished?: Promise<any>;
|
|
5
5
|
}
|
|
6
|
-
export declare
|
|
6
|
+
export declare const createAnimationControls: (animations: AnimationWithCommitStyles[]) => AnimationControls;
|
|
7
7
|
export declare const controls: {
|
|
8
8
|
get: (target: AnimationState, key: string) => number | Promise<any> | (() => void);
|
|
9
9
|
set: (target: AnimationState, key: string, value: number) => boolean;
|