@motionone/vue - npm Package Compare versions

Comparing version 10.5.0-beta.0 to 10.5.0-beta.1

dist/motion-vue.esm.js

@@ -181,6 +181,2 @@ import { defineComponent, ref, inject, provide, onMounted, onUpdated, h, onBeforeUpdate, Transition } from 'vue';
 
-const cssVariableRenderer = (element, name) => latest => element.style.setProperty(name, latest);
-
-const styleRenderer = (element, name) => latest => element.style[name] = latest;
-
 const defaults = {
@@ -574,2 +570,11 @@ duration: 0.3,
     return value;
+  },
+  set: (element, name, value) => {
+    name = getStyleName(name);
+
+    if (isCssVar(name)) {
+      element.style.setProperty(name, value);
+    } else {
+      element.style[name] = value;
+    }
   }
@@ -605,3 +610,2 @@ };
   let canAnimateNatively = supports.waapi();
-  let render = noop;
   const valueIsTransform = isTransform(key);
@@ -661,4 +665,2 @@ /**
     if (isCssVar(name)) {
-      render = cssVariableRenderer(element, name);
-
       if (supports.cssRegisterProperty()) {
@@ -669,4 +671,2 @@ registerCssVariable(name);
       }
-    } else {
-      render = styleRenderer(element, name);
     }
@@ -725,3 +725,3 @@ /**
         // Apply styles to target
-        render(target); // Ensure fill modes don't persist
+        style.set(element, name, target); // Ensure fill modes don't persist
 
@@ -754,8 +754,7 @@ animation.cancel();
 
-      if (definition) {
-        const applyStyle = render;
+      const render = latest => {
+        if (definition) latest = definition.toDefaultUnit(latest);
+        style.set(element, name, latest);
+      };
 
-        render = v => applyStyle(definition.toDefaultUnit(v));
-      }
-
       animation = new NumberAnimation(render, keyframes, Object.assign(Object.assign({}, options), {
@@ -767,3 +766,3 @@ duration,
       const target = keyframes[keyframes.length - 1];
-      render(definition && isNumber(target) ? definition.toDefaultUnit(target) : target);
+      style.set(element, name, definition && isNumber(target) ? definition.toDefaultUnit(target) : target);
     }
@@ -1220,19 +1219,2 @@
 
-const camelLetterToPipeLetter = letter => `-${letter.toLowerCase()}`;
-
-const camelToPipeCase = str => str.replace(/[A-Z]/g, camelLetterToPipeLetter);
-
-function createStyleString() {
-  let target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const styles = createStyles(target);
-  let style = "";
-
-  for (const key in styles) {
-    style += key.startsWith("--") ? key : camelToPipeCase(key);
-    style += `: ${styles[key]}; `;
-  }
-
-  return style;
-}
-
 const contextId = "motion-state";
@@ -1279,3 +1261,23 @@ const presenceId = "motion-presence";
     });
+    let manuallyAppliedMotionStyles = false;
     onUpdated(() => {
+      /**
+       * Vue reapplies all styles every render, rather than diffing and
+       * only reapplying the ones that change. This means that initially
+       * calculated motion styles also get reapplied every render, leading
+       * to incorrect animation origins.
+       *
+       * To prevent this, once an element is mounted we hand over these
+       * styles to Motion. This will currently still lead to a jump if interrupting
+       * transforms in browsers where the number polyfill is used.
+       */
+      if (!manuallyAppliedMotionStyles && root.value) {
+        manuallyAppliedMotionStyles = true;
+        const styles = createStyles(state.getTarget());
+
+        for (const key in styles) {
+          style.set(root.value, key, styles[key]);
+        }
+      }
+
       state.update(Object.assign({}, props));
@@ -1286,3 +1288,3 @@ });
       root,
-      initialStyles: createStyleString(state.getTarget())
+      initialStyles: createStyles(state.getTarget())
     };
@@ -1296,11 +1298,3 @@ },
       ref: "root",
-
-      /**
-       * We pass this as a style string as Vue doesn't diff
-       * individual styles, reapplying them every render.
-       *
-       * This leads to a known bug where if a value in this.style
-       * changes, initial styles may be reapplied.
-       */
-      style: createStyleString(this.style) + this.initialStyles
+      style: this.state.isMounted() ? this.style : Object.assign(Object.assign({}, this.style), this.initialStyles)
     }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a));
@@ -1326,3 +1320,4 @@ }
     initial: {
-      type: Boolean
+      type: Boolean,
+      default: true
     },
@@ -1329,0 +1324,0 @@ exitBeforeEnter: {

dist/motion-vue.min.js

@@ -1,1 +0,1 @@
-import{defineComponent as t,ref as e,inject as n,provide as i,onMounted as s,onUpdated as r,h as a,onBeforeUpdate as o,Transition as l}from"vue";const c=new WeakMap;function u(t){return c.has(t)||c.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),c.get(t)}function h(t,e){-1===t.indexOf(e)&&t.push(e)}const p=()=>{},d=t=>t,f=["","X","Y","Z"],m={x:"translateX",y:"translateY",z:"translateZ"},y={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},v={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:y,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:d},skew:y},g=new Map,b=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{f.forEach((e=>{w.push(t+e),g.set(b(t+e),v[t])}))}));const O=(t,e)=>w.indexOf(t)-w.indexOf(e),x=new Set(w),E=t=>x.has(t),S=(t,e)=>{m[e]&&(e=m[e]);const{transforms:n}=u(t);h(n,e),t.style.transform=A(n)},A=t=>t.sort(O).reduce(j,"").trim(),j=(t,e)=>`${t} ${e}(var(${b(e)}))`,T=t=>t.startsWith("--"),k=new Set;function M(t){if(!k.has(t)){k.add(t);try{const{syntax:e,initialValue:n}=g.has(t)?g.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}const D=t=>1e3*t,P=t=>"number"==typeof t,L=t=>Array.isArray(t)&&!P(t[0]),$=t=>"object"==typeof t&&Boolean(t.createAnimation),B=t=>(t=>Array.isArray(t)&&P(t[0]))(t)?V(t):t,V=t=>{let[e,n,i,s]=t;return`cubic-bezier(${e}, ${n}, ${i}, ${s})`},C=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{C({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(C({opacity:[0,1]}).finished)},W={},I={};for(const t in U)I[t]=()=>(void 0===W[t]&&(W[t]=U[t]()),W[t]);const F=(t,e)=>n=>t.style.setProperty(e,n),R=(t,e)=>n=>t.style[e]=n,q={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},z=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function Z(t,e,n,i){if(t===e&&n===i)return d;const s=e=>function(t,e,n,i,s){let r,a,o=0;do{a=e+(n-e)/2,r=z(a,i,s)-t,r>0?n=a:e=a}while(Math.abs(r)>1e-7&&++o<12);return a}(e,0,1,t,n);return t=>0===t||1===t?t:z(s(t),e,i)}const G=(t,e,n)=>Math.min(Math.max(n,t),e),K={ease:Z(.25,.1,.25,1),"ease-in":Z(.42,0,1,1),"ease-in-out":Z(.42,0,.58,1),"ease-out":Z(0,0,.58,1)},X=/\((.*?)\)/;function Y(t){if("function"==typeof t)return t;if(Array.isArray(t))return Z(...t);if(K[t])return K[t];if(t.startsWith("steps")){const e=X.exec(t);if(e){const t=e[1].split(",");return function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"end";return n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,s="end"===e?Math.floor(i):Math.ceil(i);return G(0,1,s/t)}}(parseFloat(t[0]),t[1].trim())}}return d}const H=(t,e,n)=>-n*t+n*e+t,J=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function N(t,e){return L(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}function Q(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const s=J(0,e,i);t.push(H(n,1,s))}}function _(t){const e=[0];return Q(e,t-1),e}const tt=t=>Math.min(1,Math.max(t,0));class et{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,1],{easing:n=q.easing,duration:i=q.duration,delay:s=q.delay,endDelay:r=q.endDelay,repeat:a=q.repeat,offset:o,direction:l="normal"}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const c=i*(a+1);$(n)&&(n="ease");const u=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:_(t.length),n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:d;const i=t.length,s=i-e.length;return s>0&&Q(e,s),s=>{let r=0;for(;r<i-2&&!(s<e[r+1]);r++);let a=tt(J(e[r],e[r+1],s));return a=N(n,r)(a),H(t[r],t[r+1],a)}}(e,o,L(n)?n.map(Y):Y(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let a=(e-this.startTime)*this.rate;this.t=a,a/=1e3,a=Math.max(a-s,0),"finished"===this.playState&&(a=c);const o=a/i;let h=Math.floor(o),p=o%1;!p&&o>=1&&(p=1),1===p&&h--;const d=h%2;("reverse"===l||"alternate"===l&&d||"alternate-reverse"===l&&!d)&&(p=1-p);const f=u(a>=c?1:Math.min(p,1));t(f);"finished"===this.playState||a>=c+r?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,f)):"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(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}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}}function nt(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}const it=t=>Array.isArray(t)?t:[t];function st(t){return m[t]&&(t=m[t]),E(t)?b(t):t}const rt=(t,e)=>{e=st(e);let n=T(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=g.get(e);t&&(n=t.initialValue)}return n};function at(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}function ot(t,e,n){let i,s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},{duration:r=q.duration,delay:a=q.delay,endDelay:o=q.endDelay,repeat:l=q.repeat,easing:c=q.easing,direction:h,offset:d,allowWebkitAcceleration:f=!1}=s;const m=u(t);let y=I.waapi(),v=p;const b=E(e);b&&S(t,e);const w=st(e),O=g.get(w);return at(m.animations[w]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=rt(t,w))&&void 0!==e?e:null==O?void 0:O.initialValue)&&void 0!==n?n:0};let u=nt(it(n),e);if($(c)){const t=c.createAnimation(u,e,b,w,m);c=t.easing,void 0!==t.keyframes&&(u=t.keyframes),void 0!==t.duration&&(r=t.duration)}if(T(w)?(v=F(t,w),I.cssRegisterProperty()?M(w):y=!1):v=R(t,w),y){O&&(u=u.map((t=>P(t)?O.toDefaultUnit(t):t))),I.partialKeyframes()||1!==u.length||u.unshift(e());const n={delay:D(a),duration:D(r),endDelay:D(o),easing:L(c)?void 0:B(c),direction:h,iterations:l+1,fill:"both"};i=t.animate({[w]:u,offset:d,easing:L(c)?c.map(B):void 0},n),i.finished||(i.finished=new Promise(((t,e)=>{i.onfinish=t,i.oncancel=e})));const s=u[u.length-1];i.finished.then((()=>{v(s),i.cancel()})).catch(p),f||(i.playbackRate=1.000001)}else if(b&&u.every(P)){if(1===u.length&&u.unshift(parseFloat(e())),O){const t=v;v=e=>t(O.toDefaultUnit(e))}i=new et(v,u,Object.assign(Object.assign({},s),{duration:r,easing:c}))}else{const t=u[u.length-1];v(O&&P(t)?O.toDefaultUnit(t):t)}return m.animations[w]=i,null==i||i.finished.then((()=>{m.animations[w]=void 0,m.generators[w]=void 0,m.prevGeneratorState[w]=void 0})).catch(p),i}}const lt=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function ct(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 s=0;for(i=Object.getOwnPropertySymbols(t);s<i.length;s++)e.indexOf(i[s])<0&&Object.prototype.propertyIsEnumerable.call(t,i[s])&&(n[i[s]]=t[i[s]])}return n}function ut(t,e){return typeof t!=typeof e||(Array.isArray(t)&&Array.isArray(e)?!function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(t,e):t!==e)}function ht(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let pt;function dt(){if(!pt)return;const t=pt.sort(yt).map(vt);t.forEach(gt),t.forEach(gt),pt=void 0}function ft(t){pt?h(pt,t):(pt=[t],requestAnimationFrame(dt))}function mt(t){pt&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(pt,t)}const yt=(t,e)=>t.getDepth()-e.getDepth(),vt=t=>t.animateUpdates(),gt=t=>t.next(),bt=(t,e)=>new CustomEvent(t,{detail:{target:e}});function wt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function Ot(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const xt=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),wt(t,e,i))},Et={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,e)=>{let{enable:n,disable:i}=e,s=!1;if("undefined"!=typeof IntersectionObserver){const e=new IntersectionObserver((e=>{let[r]=e;!s&&r.isIntersecting?(n(),Ot(t,"viewenter",r)):s&&!r.isIntersecting&&(i(),Ot(t,"viewleave",r)),s=r.isIntersecting}));return e.observe(t),()=>{e.unobserve(t),e.disconnect()}}return n(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const s=xt(t,"hoverstart",n),r=xt(t,"hoverend",i);return t.addEventListener("pointerenter",s),t.addEventListener("pointerleave",r),()=>{t.removeEventListener("pointerenter",s),t.removeEventListener("pointerleave",r)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const s=e=>{i(),wt(t,"pressend",e),window.removeEventListener("pointerup",s)},r=e=>{n(),wt(t,"pressstart",e),window.addEventListener("pointerup",s)};return t.addEventListener("pointerdown",r),()=>{t.removeEventListener("pointerdown",r),window.removeEventListener("pointerup",s)}}}},St=["initial","animate",...Object.keys(Et),"exit"],At=new WeakMap;function jt(t){const e={},n=[];for(let i in t){const s=t[i];E(i)&&(m[i]&&(i=m[i]),n.push(i),i=b(i));let r=Array.isArray(s)?s[0]:s;const a=g.get(i);a&&(r=P(s)?a.toDefaultUnit(s):s),e[i]=r}return n.length&&(e.transform=A(n)),e}const Tt=t=>`-${t.toLowerCase()}`,kt=t=>t.replace(/[A-Z]/g,Tt);function Mt(){let t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};const e=jt(t);let n="";for(const t in e)n+=t.startsWith("--")?t:kt(t),n+=`: ${e[t]}; `;return n}const Dt={type:Object},Pt=t({name:"Motion",inheritAttrs:!0,props:{tag:{type:String,default:"div"},initial:Dt,animate:Dt,inView:Dt,hover:Dt,press:Dt,exit:Dt,transition:{type:Object},style:{type:Object}},setup(t){const a=e(null),o=n("motion-state",void 0),l=n("motion-presence",void 0),c=function(){let t,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1?arguments[1]:void 0,i=n?n.getDepth()+1:0;const s={initial:!0,animate:!0},r={},a={};for(const t of St)a[t]="string"==typeof e[t]?e[t]:null==n?void 0:n.getContext()[t];const o=!1===e.initial?"animate":"initial";let l=ct(ht(e[o]||a[o],e.variants)||{},["transition"]);const c=Object.assign({},l);function*u(){var n,i;const r=l;l={};const a={},o={},u={};for(const t of St){if(!s[t])continue;const r=ht(e[t]);if(r){a[t]=r;for(const s in r)"transition"!==s&&(l[s]=r[s],u[s]=lt(null!==(i=null!==(n=r.transition)&&void 0!==n?n:e.transition)&&void 0!==i?i:{},s),o[s]=t)}}const h=new Set([...Object.keys(l),...Object.keys(r)]),d=[];h.forEach((e=>{var n;void 0===l[e]&&(l[e]=c[e]),ut(r[e],l[e])&&(null!==(n=c[e])&&void 0!==n||(c[e]=rt(t,e)),d.push(ot(t,e,l[e],u[e])))})),yield;const f=d.map((t=>t())).filter(Boolean);if(!f.length)return;const m=l;t.dispatchEvent(bt("motionstart",m)),Promise.all(f.map((t=>t.finished))).then((()=>{t.dispatchEvent(bt("motioncomplete",m))})).catch(p)}const h=(t,e)=>()=>{s[t]=e,ft(f)},d=()=>{for(const n in Et){const i=Et[n].isActive(e),s=r[n];i&&!s?r[n]=Et[n].subscribe(t,{enable:h(n,!0),disable:h(n,!1)}):!i&&s&&(s(),delete r[n])}},f={update:n=>{t&&(e=n,d(),ft(f))},setActive:(e,n)=>{t&&(s[e]=n,ft(f))},animateUpdates:u,getDepth:()=>i,getTarget:()=>l,getOptions:()=>e,getContext:()=>a,mount:e=>(t=e,At.set(t,f),d(),()=>{At.delete(t),mt(f);for(const t in r)r[t]()}),isMounted:()=>Boolean(t)};return f}(Object.assign(Object.assign({},t),{initial:!1===(null==l?void 0:l.initial)?l.initial:t.initial}),o);return i("motion-state",c),s((()=>{const e=c.mount(a.value);return c.update(Object.assign({},t)),e})),r((()=>{c.update(Object.assign({},t))})),{state:c,root:a,initialStyles:Mt(c.getTarget())}},render(){var t,e;return a(this.tag,{ref:"root",style:Mt(this.style)+this.initialStyles},null===(e=(t=this.$slots).default)||void 0===e?void 0:e.call(t))}}),Lt=new WeakMap;function $t(t){const e=Lt.get(t);e&&t.removeEventListener("motioncomplete",e),Lt.delete(t)}const Bt=t({name:"Presence",props:{name:{type:String},initial:{type:Boolean},exitBeforeEnter:{type:Boolean,default:!1}},methods:{enter(t){const e=At.get(t);e&&($t(t),e.setActive("exit",!1))},exit(t,e){const n=At.get(t);if(!n)return e();n.setActive("exit",!0),$t(t),Lt.set(t,e),t.addEventListener("motioncomplete",e)}},setup(t){let{initial:e}=t;const n={initial:e};i("motion-presence",n),o((()=>{n.initial=void 0}))},render(){var t,e;return a(l,{name:this.name,onEnter:this.enter,onLeave:this.exit,css:!1,mode:this.exitBeforeEnter?"out-in":void 0},null===(e=(t=this.$slots).default)||void 0===e?void 0:e.call(t))}});export{Pt as Motion,Bt as Presence};
+import{defineComponent as t,ref as e,inject as n,provide as i,onMounted as s,onUpdated as a,h as r,onBeforeUpdate as o,Transition as l}from"vue";const c=new WeakMap;function u(t){return c.has(t)||c.set(t,{transforms:[],animations:{},generators:{},prevGeneratorState:{}}),c.get(t)}function h(t,e){-1===t.indexOf(e)&&t.push(e)}const p=()=>{},d=t=>t,f=["","X","Y","Z"],m={x:"translateX",y:"translateY",z:"translateZ"},y={syntax:"<angle>",initialValue:"0deg",toDefaultUnit:t=>t+"deg"},v={translate:{syntax:"<length-percentage>",initialValue:"0px",toDefaultUnit:t=>t+"px"},rotate:y,scale:{syntax:"<number>",initialValue:1,toDefaultUnit:d},skew:y},g=new Map,b=t=>`--motion-${t}`,w=["x","y","z"];["translate","scale","rotate","skew"].forEach((t=>{f.forEach((e=>{w.push(t+e),g.set(b(t+e),v[t])}))}));const O=(t,e)=>w.indexOf(t)-w.indexOf(e),x=new Set(w),E=t=>x.has(t),S=(t,e)=>{m[e]&&(e=m[e]);const{transforms:n}=u(t);h(n,e),t.style.transform=j(n)},j=t=>t.sort(O).reduce(A,"").trim(),A=(t,e)=>`${t} ${e}(var(${b(e)}))`,T=t=>t.startsWith("--"),k=new Set;function M(t){if(!k.has(t)){k.add(t);try{const{syntax:e,initialValue:n}=g.has(t)?g.get(t):{};CSS.registerProperty({name:t,inherits:!1,syntax:e,initialValue:n})}catch(t){}}}const D=t=>1e3*t,P=t=>"number"==typeof t,L=t=>Array.isArray(t)&&!P(t[0]),B=t=>"object"==typeof t&&Boolean(t.createAnimation),V=t=>(t=>Array.isArray(t)&&P(t[0]))(t)?$(t):t,$=t=>{let[e,n,i,s]=t;return`cubic-bezier(${e}, ${n}, ${i}, ${s})`},C=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{C({opacity:[1]})}catch(t){return!1}return!0},finished:()=>Boolean(C({opacity:[0,1]}).finished)},I={},W={};for(const t in U)W[t]=()=>(void 0===I[t]&&(I[t]=U[t]()),I[t]);const F={duration:.3,delay:0,endDelay:0,repeat:0,easing:"ease"},R=(t,e,n)=>(((1-3*n+3*e)*t+(3*n-6*e))*t+3*e)*t;function q(t,e,n,i){if(t===e&&n===i)return d;const s=e=>function(t,e,n,i,s){let a,r,o=0;do{r=e+(n-e)/2,a=R(r,i,s)-t,a>0?n=r:e=r}while(Math.abs(a)>1e-7&&++o<12);return r}(e,0,1,t,n);return t=>0===t||1===t?t:R(s(t),e,i)}const z=(t,e,n)=>Math.min(Math.max(n,t),e),G={ease:q(.25,.1,.25,1),"ease-in":q(.42,0,1,1),"ease-in-out":q(.42,0,.58,1),"ease-out":q(0,0,.58,1)},K=/\((.*?)\)/;function X(t){if("function"==typeof t)return t;if(Array.isArray(t))return q(...t);if(G[t])return G[t];if(t.startsWith("steps")){const e=K.exec(t);if(e){const t=e[1].split(",");return function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"end";return n=>{const i=(n="end"===e?Math.min(n,.999):Math.max(n,.001))*t,s="end"===e?Math.floor(i):Math.ceil(i);return z(0,1,s/t)}}(parseFloat(t[0]),t[1].trim())}}return d}const Y=(t,e,n)=>-n*t+n*e+t,Z=(t,e,n)=>e-t==0?1:(n-t)/(e-t);function H(t,e){return L(t)?t[((t,e,n)=>{const i=e-t;return((n-t)%i+i)%i+t})(0,t.length,e)]:t}function J(t,e){const n=t[t.length-1];for(let i=1;i<=e;i++){const s=Z(0,e,i);t.push(Y(n,1,s))}}function N(t){const e=[0];return J(e,t-1),e}const Q=t=>Math.min(1,Math.max(t,0));class _{constructor(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[0,1],{easing:n=F.easing,duration:i=F.duration,delay:s=F.delay,endDelay:a=F.endDelay,repeat:r=F.repeat,offset:o,direction:l="normal"}=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};this.startTime=0,this.rate=1,this.t=0,this.cancelTimestamp=0,this.playState="idle",this.finished=new Promise(((t,e)=>{this.resolve=t,this.reject=e}));const c=i*(r+1);B(n)&&(n="ease");const u=function(t){let e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:N(t.length),n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:d;const i=t.length,s=i-e.length;return s>0&&J(e,s),s=>{let a=0;for(;a<i-2&&!(s<e[a+1]);a++);let r=Q(Z(e[a],e[a+1],s));return r=H(n,a)(r),Y(t[a],t[a+1],r)}}(e,o,L(n)?n.map(X):X(n));this.tick=e=>{var n;this.pauseTime&&(e=this.pauseTime);let r=(e-this.startTime)*this.rate;this.t=r,r/=1e3,r=Math.max(r-s,0),"finished"===this.playState&&(r=c);const o=r/i;let h=Math.floor(o),p=o%1;!p&&o>=1&&(p=1),1===p&&h--;const d=h%2;("reverse"===l||"alternate"===l&&d||"alternate-reverse"===l&&!d)&&(p=1-p);const f=u(r>=c?1:Math.min(p,1));t(f);"finished"===this.playState||r>=c+a?(this.playState="finished",null===(n=this.resolve)||void 0===n||n.call(this,f)):"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(){var t;this.playState="idle",this.tick(this.cancelTimestamp),null===(t=this.reject)||void 0===t||t.call(this,!1)}reverse(){this.rate*=-1}commitStyles(){this.cancelTimestamp=performance.now()}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}}function tt(t,e){for(let n=0;n<t.length;n++)null===t[n]&&(t[n]=n?t[n-1]:e());return t}const et=t=>Array.isArray(t)?t:[t];function nt(t){return m[t]&&(t=m[t]),E(t)?b(t):t}const it=(t,e)=>{e=nt(e);let n=T(e)?t.style.getPropertyValue(e):getComputedStyle(t)[e];if(!n&&0!==n){const t=g.get(e);t&&(n=t.initialValue)}return n},st=(t,e,n)=>{e=nt(e),T(e)?t.style.setProperty(e,n):t.style[e]=n};function at(t){if(t)try{"finished"!==t.playState&&t.commitStyles(),t.cancel()}catch(t){}}function rt(t,e,n){let i,s=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},{duration:a=F.duration,delay:r=F.delay,endDelay:o=F.endDelay,repeat:l=F.repeat,easing:c=F.easing,direction:h,offset:d,allowWebkitAcceleration:f=!1}=s;const m=u(t);let y=W.waapi();const v=E(e);v&&S(t,e);const b=nt(e),w=g.get(b);return at(m.animations[b]),()=>{const e=()=>{var e,n;return null!==(n=null!==(e=it(t,b))&&void 0!==e?e:null==w?void 0:w.initialValue)&&void 0!==n?n:0};let u=tt(et(n),e);if(B(c)){const t=c.createAnimation(u,e,v,b,m);c=t.easing,void 0!==t.keyframes&&(u=t.keyframes),void 0!==t.duration&&(a=t.duration)}if(T(b)&&(W.cssRegisterProperty()?M(b):y=!1),y){w&&(u=u.map((t=>P(t)?w.toDefaultUnit(t):t))),W.partialKeyframes()||1!==u.length||u.unshift(e());const n={delay:D(r),duration:D(a),endDelay:D(o),easing:L(c)?void 0:V(c),direction:h,iterations:l+1,fill:"both"};i=t.animate({[b]:u,offset:d,easing:L(c)?c.map(V):void 0},n),i.finished||(i.finished=new Promise(((t,e)=>{i.onfinish=t,i.oncancel=e})));const s=u[u.length-1];i.finished.then((()=>{st(t,b,s),i.cancel()})).catch(p),f||(i.playbackRate=1.000001)}else if(v&&u.every(P)){1===u.length&&u.unshift(parseFloat(e()));i=new _((e=>{w&&(e=w.toDefaultUnit(e)),st(t,b,e)}),u,Object.assign(Object.assign({},s),{duration:a,easing:c}))}else{const e=u[u.length-1];st(t,b,w&&P(e)?w.toDefaultUnit(e):e)}return m.animations[b]=i,null==i||i.finished.then((()=>{m.animations[b]=void 0,m.generators[b]=void 0,m.prevGeneratorState[b]=void 0})).catch(p),i}}const ot=(t,e)=>t[e]?Object.assign(Object.assign({},t),t[e]):Object.assign({},t);function lt(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 s=0;for(i=Object.getOwnPropertySymbols(t);s<i.length;s++)e.indexOf(i[s])<0&&Object.prototype.propertyIsEnumerable.call(t,i[s])&&(n[i[s]]=t[i[s]])}return n}function ct(t,e){return typeof t!=typeof e||(Array.isArray(t)&&Array.isArray(e)?!function(t,e){const n=e.length;if(n!==t.length)return!1;for(let i=0;i<n;i++)if(e[i]!==t[i])return!1;return!0}(t,e):t!==e)}function ut(t,e){return function(t){return"object"==typeof t}(t)?t:t&&e?e[t]:void 0}let ht;function pt(){if(!ht)return;const t=ht.sort(mt).map(yt);t.forEach(vt),t.forEach(vt),ht=void 0}function dt(t){ht?h(ht,t):(ht=[t],requestAnimationFrame(pt))}function ft(t){ht&&function(t,e){const n=t.indexOf(e);n>-1&&t.splice(n,1)}(ht,t)}const mt=(t,e)=>t.getDepth()-e.getDepth(),yt=t=>t.animateUpdates(),vt=t=>t.next(),gt=(t,e)=>new CustomEvent(t,{detail:{target:e}});function bt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEvent:n}}))}function wt(t,e,n){t.dispatchEvent(new CustomEvent(e,{detail:{originalEntry:n}}))}const Ot=(t,e,n)=>i=>{i.pointerType&&"mouse"!==i.pointerType||(n(),bt(t,e,i))},xt={inView:{isActive:t=>Boolean(t.inView),subscribe:(t,e)=>{let{enable:n,disable:i}=e,s=!1;if("undefined"!=typeof IntersectionObserver){const e=new IntersectionObserver((e=>{let[a]=e;!s&&a.isIntersecting?(n(),wt(t,"viewenter",a)):s&&!a.isIntersecting&&(i(),wt(t,"viewleave",a)),s=a.isIntersecting}));return e.observe(t),()=>{e.unobserve(t),e.disconnect()}}return n(),()=>{}}},hover:{isActive:t=>Boolean(t.hover),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const s=Ot(t,"hoverstart",n),a=Ot(t,"hoverend",i);return t.addEventListener("pointerenter",s),t.addEventListener("pointerleave",a),()=>{t.removeEventListener("pointerenter",s),t.removeEventListener("pointerleave",a)}}},press:{isActive:t=>Boolean(t.press),subscribe:(t,e)=>{let{enable:n,disable:i}=e;const s=e=>{i(),bt(t,"pressend",e),window.removeEventListener("pointerup",s)},a=e=>{n(),bt(t,"pressstart",e),window.addEventListener("pointerup",s)};return t.addEventListener("pointerdown",a),()=>{t.removeEventListener("pointerdown",a),window.removeEventListener("pointerup",s)}}}},Et=["initial","animate",...Object.keys(xt),"exit"],St=new WeakMap;function jt(t){const e={},n=[];for(let i in t){const s=t[i];E(i)&&(m[i]&&(i=m[i]),n.push(i),i=b(i));let a=Array.isArray(s)?s[0]:s;const r=g.get(i);r&&(a=P(s)?r.toDefaultUnit(s):s),e[i]=a}return n.length&&(e.transform=j(n)),e}const At={type:Object},Tt=t({name:"Motion",inheritAttrs:!0,props:{tag:{type:String,default:"div"},initial:At,animate:At,inView:At,hover:At,press:At,exit:At,transition:{type:Object},style:{type:Object}},setup(t){const r=e(null),o=n("motion-state",void 0),l=n("motion-presence",void 0),c=function(){let t,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=arguments.length>1?arguments[1]:void 0,i=n?n.getDepth()+1:0;const s={initial:!0,animate:!0},a={},r={};for(const t of Et)r[t]="string"==typeof e[t]?e[t]:null==n?void 0:n.getContext()[t];const o=!1===e.initial?"animate":"initial";let l=lt(ut(e[o]||r[o],e.variants)||{},["transition"]);const c=Object.assign({},l);function*u(){var n,i;const a=l;l={};const r={},o={},u={};for(const t of Et){if(!s[t])continue;const a=ut(e[t]);if(a){r[t]=a;for(const s in a)"transition"!==s&&(l[s]=a[s],u[s]=ot(null!==(i=null!==(n=a.transition)&&void 0!==n?n:e.transition)&&void 0!==i?i:{},s),o[s]=t)}}const h=new Set([...Object.keys(l),...Object.keys(a)]),d=[];h.forEach((e=>{var n;void 0===l[e]&&(l[e]=c[e]),ct(a[e],l[e])&&(null!==(n=c[e])&&void 0!==n||(c[e]=it(t,e)),d.push(rt(t,e,l[e],u[e])))})),yield;const f=d.map((t=>t())).filter(Boolean);if(!f.length)return;const m=l;t.dispatchEvent(gt("motionstart",m)),Promise.all(f.map((t=>t.finished))).then((()=>{t.dispatchEvent(gt("motioncomplete",m))})).catch(p)}const h=(t,e)=>()=>{s[t]=e,dt(f)},d=()=>{for(const n in xt){const i=xt[n].isActive(e),s=a[n];i&&!s?a[n]=xt[n].subscribe(t,{enable:h(n,!0),disable:h(n,!1)}):!i&&s&&(s(),delete a[n])}},f={update:n=>{t&&(e=n,d(),dt(f))},setActive:(e,n)=>{t&&(s[e]=n,dt(f))},animateUpdates:u,getDepth:()=>i,getTarget:()=>l,getOptions:()=>e,getContext:()=>r,mount:e=>(t=e,St.set(t,f),d(),()=>{St.delete(t),ft(f);for(const t in a)a[t]()}),isMounted:()=>Boolean(t)};return f}(Object.assign(Object.assign({},t),{initial:!1===(null==l?void 0:l.initial)?l.initial:t.initial}),o);i("motion-state",c),s((()=>{const e=c.mount(r.value);return c.update(Object.assign({},t)),e}));let u=!1;return a((()=>{if(!u&&r.value){u=!0;const t=jt(c.getTarget());for(const e in t)st(r.value,e,t[e])}c.update(Object.assign({},t))})),{state:c,root:r,initialStyles:jt(c.getTarget())}},render(){var t,e;return r(this.tag,{ref:"root",style:this.state.isMounted()?this.style:Object.assign(Object.assign({},this.style),this.initialStyles)},null===(e=(t=this.$slots).default)||void 0===e?void 0:e.call(t))}}),kt=new WeakMap;function Mt(t){const e=kt.get(t);e&&t.removeEventListener("motioncomplete",e),kt.delete(t)}const Dt=t({name:"Presence",props:{name:{type:String},initial:{type:Boolean,default:!0},exitBeforeEnter:{type:Boolean,default:!1}},methods:{enter(t){const e=St.get(t);e&&(Mt(t),e.setActive("exit",!1))},exit(t,e){const n=St.get(t);if(!n)return e();n.setActive("exit",!0),Mt(t),kt.set(t,e),t.addEventListener("motioncomplete",e)}},setup(t){let{initial:e}=t;const n={initial:e};i("motion-presence",n),o((()=>{n.initial=void 0}))},render(){var t,e;return r(l,{name:this.name,onEnter:this.enter,onLeave:this.exit,css:!1,mode:this.exitBeforeEnter?"out-in":void 0},null===(e=(t=this.$slots).default)||void 0===e?void 0:e.call(t))}});export{Tt as Motion,Dt as Presence};

dist/motion-vue.ssr.js

@@ -161,5 +161,3 @@ 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var vue=require('vue');const data = new WeakMap();
   };
-}const cssVariableRenderer = (element, name) => latest => element.style.setProperty(name, latest);
-
-const styleRenderer = (element, name) => latest => element.style[name] = latest;const defaults = {
+}const defaults = {
   duration: 0.3,
@@ -524,2 +522,11 @@ delay: 0,
     return value;
+  },
+  set: (element, name, value) => {
+    name = getStyleName(name);
+
+    if (isCssVar(name)) {
+      element.style.setProperty(name, value);
+    } else {
+      element.style[name] = value;
+    }
   }
@@ -551,3 +558,2 @@ };function stopAnimation(animation) {
   let canAnimateNatively = supports.waapi();
-  let render = noop;
   const valueIsTransform = isTransform(key);
@@ -607,4 +613,2 @@ /**
     if (isCssVar(name)) {
-      render = cssVariableRenderer(element, name);
-
       if (supports.cssRegisterProperty()) {
@@ -615,4 +619,2 @@ registerCssVariable(name);
       }
-    } else {
-      render = styleRenderer(element, name);
     }
@@ -671,3 +673,3 @@ /**
         // Apply styles to target
-        render(target); // Ensure fill modes don't persist
+        style.set(element, name, target); // Ensure fill modes don't persist
 
@@ -700,8 +702,7 @@ animation.cancel();
 
-      if (definition) {
-        const applyStyle = render;
+      const render = latest => {
+        if (definition) latest = definition.toDefaultUnit(latest);
+        style.set(element, name, latest);
+      };
 
-        render = v => applyStyle(definition.toDefaultUnit(v));
-      }
-
       animation = new NumberAnimation(render, keyframes, Object.assign(Object.assign({}, options), {
@@ -713,3 +714,3 @@ duration,
       const target = keyframes[keyframes.length - 1];
-      render(definition && isNumber(target) ? definition.toDefaultUnit(target) : target);
+      style.set(element, name, definition && isNumber(target) ? definition.toDefaultUnit(target) : target);
     }
@@ -1140,17 +1141,2 @@
   return initialKeyframes;
-}const camelLetterToPipeLetter = letter => `-${letter.toLowerCase()}`;
-
-const camelToPipeCase = str => str.replace(/[A-Z]/g, camelLetterToPipeLetter);
-
-function createStyleString() {
-  let target = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  const styles = createStyles(target);
-  let style = "";
-
-  for (const key in styles) {
-    style += key.startsWith("--") ? key : camelToPipeCase(key);
-    style += `: ${styles[key]}; `;
-  }
-
-  return style;
 }const contextId = "motion-state";
@@ -1195,3 +1181,23 @@ const presenceId = "motion-presence";const variants = {
     });
+    let manuallyAppliedMotionStyles = false;
     vue.onUpdated(() => {
+      /**
+       * Vue reapplies all styles every render, rather than diffing and
+       * only reapplying the ones that change. This means that initially
+       * calculated motion styles also get reapplied every render, leading
+       * to incorrect animation origins.
+       *
+       * To prevent this, once an element is mounted we hand over these
+       * styles to Motion. This will currently still lead to a jump if interrupting
+       * transforms in browsers where the number polyfill is used.
+       */
+      if (!manuallyAppliedMotionStyles && root.value) {
+        manuallyAppliedMotionStyles = true;
+        const styles = createStyles(state.getTarget());
+
+        for (const key in styles) {
+          style.set(root.value, key, styles[key]);
+        }
+      }
+
       state.update(Object.assign({}, props));
@@ -1202,3 +1208,3 @@ });
       root,
-      initialStyles: createStyleString(state.getTarget())
+      initialStyles: createStyles(state.getTarget())
     };
@@ -1212,11 +1218,3 @@ },
       ref: "root",
-
-      /**
-       * We pass this as a style string as Vue doesn't diff
-       * individual styles, reapplying them every render.
-       *
-       * This leads to a known bug where if a value in this.style
-       * changes, initial styles may be reapplied.
-       */
-      style: createStyleString(this.style) + this.initialStyles
+      style: this.state.isMounted() ? this.style : Object.assign(Object.assign({}, this.style), this.initialStyles)
     }, (_b = (_a = this.$slots).default) === null || _b === void 0 ? void 0 : _b.call(_a));
@@ -1240,3 +1238,4 @@ }
     initial: {
-      type: Boolean
+      type: Boolean,
+      default: true
     },
@@ -1243,0 +1242,0 @@ exitBeforeEnter: {

dist/Motion.d.ts

@@ -33,3 +33,3 @@ export declare const Motion: import("vue").DefineComponent<{
     root: import("vue").Ref<Element | null>;
-    initialStyles: string;
+    initialStyles: any;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
@@ -36,0 +36,0 @@ tag?: unknown;

dist/Presence.d.ts

@@ -7,2 +7,3 @@ export declare const Presence: import("vue").DefineComponent<{
         type: BooleanConstructor;
+        default: boolean;
     };
@@ -9,0 +10,0 @@ exitBeforeEnter: {

package.json

 {
   "name": "@motionone/vue",
-  "version": "10.5.0-beta.0",
+  "version": "10.5.0-beta.1",
   "description": "A tiny, performant animation library for Vue",
@@ -21,3 +21,3 @@ "author": "Matt Perry",
   "dependencies": {
-    "@motionone/dom": "^10.5.0-beta.0",
+    "@motionone/dom": "^10.5.0-beta.1",
     "tslib": "^2.3.1"
@@ -54,3 +54,3 @@ },
   ],
-  "gitHead": "96e3017ce1d664f6cb03a62c9f215347218fd918"
+  "gitHead": "94fb50e6a6cff18c6328ef7c2636049857042c42"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

98922

increased by0.12%

Lines of code

2332

increased by0.3%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• Updated@motionone/dom@^10.5.0-beta.1