motion-v 0.11.1 → 0.11.2

package/dist/cjs/index.js

@@ -5193,19 +5193,23 @@ function isAnimateChanged(oldOptions, newOptions) {
   const newAnimate = newOptions.animate;
   if (oldAnimate === newAnimate)
     return false;
-  if (!oldAnimate || !newAnimate)
+  if (!oldAnimate || !newAnimate) {
     return true;
+  }
   if (typeof oldAnimate === "object" || typeof newAnimate === "object") {
     const oldKeys = Object.keys(oldAnimate);
     const newKeys = Object.keys(newAnimate);
     if (oldKeys.length !== newKeys.length)
       return true;
     return oldKeys.some((key) => {
+      if (key === "transition")
+        return false;
       const oldVal = oldAnimate[key];
       const newVal = newAnimate[key];
       return oldVal !== newVal;
     });
   }
+  console.log(2344);
   return oldAnimate !== newAnimate;
 }
 const rotation = {
@@ -5436,7 +5440,7 @@ const Primitive = vue.defineComponent({
     const SELF_CLOSING_TAGS = ["area", "img", "input"];
     return () => {
       const motionProps = props.getProps();
-      const allAttrs = { ...attrs, ...motionProps };
+      const allAttrs = { ...motionProps, ...attrs };
       if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
         return vue.h(asTag, allAttrs);
       if (asTag !== "template") {
@@ -8191,7 +8195,8 @@ function animateUpdates({
   controlDelay = 0,
   directAnimate,
   directTransition,
-  isFallback = false
+  isFallback = false,
+  isExit = false
 } = {}) {
   const prevTarget = this.target;
   this.target = { ...this.baseTarget };
@@ -8203,7 +8208,14 @@ function animateUpdates({
     animationOptions = resolveStateAnimation.call(this, controlActiveState, transition);
   const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
   const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, this.activeStates, isFallback);
-  return executeAnimations.call(this, factories, getChildAnimations, childAnimations, transition, controlActiveState);
+  return executeAnimations.call(this, {
+    factories,
+    getChildAnimations,
+    childAnimations,
+    transition,
+    controlActiveState,
+    isExit
+  });
 }
 function resolveDirectAnimation(directAnimate, directTransition) {
   const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
@@ -8223,24 +8235,29 @@ function resolveStateAnimation(controlActiveState, transition) {
   if (controlActiveState)
     this.activeStates = { ...this.activeStates, ...controlActiveState };
   const transitionOptions = {};
+  let variantTransition = {};
+  let variant = {};
   STATE_TYPES.forEach((name) => {
     if (!this.activeStates[name] || isAnimationControls(this.options[name]))
       return;
     const definition = this.options[name];
-    let variant = core.isDef(definition) ? resolveVariant(definition, this.options.variants, this.options.custom) : void 0;
+    let resolvedVariant = core.isDef(definition) ? resolveVariant(definition, this.options.variants, this.options.custom) : void 0;
     if (this.visualElement.isVariantNode) {
       const controlVariant = resolveVariant(this.context[name], this.options.variants, this.options.custom);
-      variant = controlVariant ? Object.assign(controlVariant || {}, variant) : variant;
+      resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, variant) : variant;
     }
-    if (!variant)
+    if (!resolvedVariant)
       return;
-    Object.assign(transition, variant.transition);
-    Object.entries(variant).forEach(([key, value]) => {
-      if (key === "transition")
-        return;
-      this.target[key] = value;
-      transitionOptions[key] = getOptions(transition, key);
-    });
+    if (name !== "initial")
+      variantTransition = resolvedVariant.transition || this.options.transition;
+    variant = Object.assign(variant, resolvedVariant);
+  });
+  Object.assign(transition, variantTransition);
+  Object.entries(variant).forEach(([key, value]) => {
+    if (key === "transition")
+      return;
+    this.target[key] = value;
+    transitionOptions[key] = getOptions(transition, key);
   });
   return transitionOptions;
 }
@@ -8285,25 +8302,22 @@ function setupChildAnimations(transition, controlActiveState, isFallback) {
     childAnimations
   };
 }
-function executeAnimations(factories, getChildAnimations, childAnimations, transition, controlActiveState) {
-  let animations;
-  const getAnimation = () => {
-    animations = factories.map((factory) => factory()).filter(Boolean);
-    return Promise.all(animations);
-  };
-  const isExit = this.activeStates.exit;
+function executeAnimations({
+  factories,
+  getChildAnimations,
+  childAnimations,
+  transition,
+  controlActiveState,
+  isExit = false
+}) {
+  const getAnimation = () => Promise.all(factories.map((factory) => factory()).filter(Boolean));
   const animationTarget2 = { ...this.target };
   const element = this.element;
   const finishAnimation2 = (animationPromise) => {
-    if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
-      if (isExit) {
-        element.dispatchEvent(motionEvent("motionstart", animationTarget2));
-        element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
-      }
-      return;
-    }
     element.dispatchEvent(motionEvent("motionstart", animationTarget2));
-    animationPromise.then(() => element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit))).catch(noop);
+    animationPromise.then(() => {
+      element.dispatchEvent(motionEvent("motioncomplete", animationTarget2, isExit));
+    }).catch(noop);
   };
   const getAnimationPromise = () => {
     const animationPromise = (transition == null ? void 0 : transition.when) ? (transition.when === "beforeChildren" ? getAnimation() : getChildAnimations()).then(() => transition.when === "beforeChildren" ? getChildAnimations() : getAnimation()) : Promise.all([getAnimation(), getChildAnimations()]);
@@ -8337,7 +8351,7 @@ class MotionState {
     this.parent = parent;
     (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.add(this);
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
-    const initialVariantSource = this.context.initial === false ? "animate" : "initial";
+    const initialVariantSource = this.context.initial === false ? ["initial", "animate"] : ["initial"];
     this.initTarget(initialVariantSource);
     this.visualElement = createVisualElement(this.options.as, {
       presenceContext: null,
@@ -8379,7 +8393,12 @@ class MotionState {
   }
   // Initialize animation target values
   initTarget(initialVariantSource) {
-    this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
+    this.baseTarget = initialVariantSource.reduce((acc, variant) => {
+      return {
+        ...acc,
+        ...resolveVariant(this.options[variant] || this.context[variant], this.options.variants)
+      };
+    }, {});
     this.target = {};
   }
   // Update visual element with new options
@@ -8495,7 +8514,8 @@ class MotionState {
     });
     if (isAnimate) {
       this.animateUpdates({
-        isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants
+        isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants,
+        isExit: this.activeStates.exit
       });
     }
   }
@@ -8721,11 +8741,12 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
       return attrsProps;
     }
     const PrimitiveRef = vue.ref();
-    function onMotionComplete() {
-      var _a;
+    function onMotionComplete(e) {
+      var _a, _b;
       if (props.asChild) {
         (_a = PrimitiveRef.value) == null ? void 0 : _a.$forceUpdate();
       }
+      (_b = attrs.onMotioncomplete) == null ? void 0 : _b.call(attrs, e);
     }
     return (_ctx, _cache) => {
       var _a;
@@ -8921,10 +8942,10 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
           }
         }
       }
-      doneCallbacks.set(el, doneCallback);
-      el.addEventListener("motioncomplete", doneCallback);
       delay(() => {
         state2.setActive("exit", true);
+        doneCallbacks.set(el, doneCallback);
+        el.addEventListener("motioncomplete", doneCallback);
       });
     }
     const transitionProps = vue.computed(() => {

package/dist/es/components/animate-presence/AnimatePresence.vue.mjs

@@ -80,10 +80,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }
         }
       }
-      doneCallbacks.set(el, doneCallback);
-      el.addEventListener("motioncomplete", doneCallback);
       delay(() => {
         state.setActive("exit", true);
+        doneCallbacks.set(el, doneCallback);
+        el.addEventListener("motioncomplete", doneCallback);
       });
     }
     const transitionProps = computed(() => {

package/dist/es/components/motion/Motion.vue.mjs

@@ -201,11 +201,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return attrsProps;
     }
     const PrimitiveRef = ref();
-    function onMotionComplete() {
-      var _a;
+    function onMotionComplete(e) {
+      var _a, _b;
       if (props.asChild) {
         (_a = PrimitiveRef.value) == null ? void 0 : _a.$forceUpdate();
       }
+      (_b = attrs.onMotioncomplete) == null ? void 0 : _b.call(attrs, e);
     }
     return (_ctx, _cache) => {
       var _a;

package/dist/es/components/motion/Primitive.mjs

@@ -22,7 +22,7 @@ const Primitive = defineComponent({
     const SELF_CLOSING_TAGS = ["area", "img", "input"];
     return () => {
       const motionProps = props.getProps();
-      const allAttrs = { ...attrs, ...motionProps };
+      const allAttrs = { ...motionProps, ...attrs };
       if (typeof asTag === "string" && SELF_CLOSING_TAGS.includes(asTag))
         return h(asTag, allAttrs);
       if (asTag !== "template") {

package/dist/es/state/animate-updates.d.ts

@@ -9,11 +9,12 @@ export type StateType = typeof STATE_TYPES[number];
  * @param directAnimate - 直接动画目标值
  * @param directTransition - 直接动画过渡配置
  */
-export declare function animateUpdates(this: MotionState, { controlActiveState, controlDelay, directAnimate, directTransition, isFallback, }?: {
+export declare function animateUpdates(this: MotionState, { controlActiveState, controlDelay, directAnimate, directTransition, isFallback, isExit, }?: {
     controlActiveState?: Partial<Record<string, boolean>>;
     controlDelay?: number;
     directAnimate?: Options['animate'];
     directTransition?: $Transition;
     isFallback?: boolean;
+    isExit?: boolean;
 }): any;
 export {};

package/dist/es/state/animate-updates.mjs

@@ -13,7 +13,8 @@ function animateUpdates({
   controlDelay = 0,
   directAnimate,
   directTransition,
-  isFallback = false
+  isFallback = false,
+  isExit = false
 } = {}) {
   const prevTarget = this.target;
   this.target = { ...this.baseTarget };
@@ -25,7 +26,14 @@ function animateUpdates({
     animationOptions = resolveStateAnimation.call(this, controlActiveState, transition);
   const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
   const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, this.activeStates, isFallback);
-  return executeAnimations.call(this, factories, getChildAnimations, childAnimations, transition, controlActiveState);
+  return executeAnimations.call(this, {
+    factories,
+    getChildAnimations,
+    childAnimations,
+    transition,
+    controlActiveState,
+    isExit
+  });
 }
 function resolveDirectAnimation(directAnimate, directTransition) {
   const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
@@ -45,24 +53,29 @@ function resolveStateAnimation(controlActiveState, transition) {
   if (controlActiveState)
     this.activeStates = { ...this.activeStates, ...controlActiveState };
   const transitionOptions = {};
+  let variantTransition = {};
+  let variant = {};
   STATE_TYPES.forEach((name) => {
     if (!this.activeStates[name] || isAnimationControls(this.options[name]))
       return;
     const definition = this.options[name];
-    let variant = isDef(definition) ? resolveVariant(definition, this.options.variants, this.options.custom) : void 0;
+    let resolvedVariant = isDef(definition) ? resolveVariant(definition, this.options.variants, this.options.custom) : void 0;
     if (this.visualElement.isVariantNode) {
       const controlVariant = resolveVariant(this.context[name], this.options.variants, this.options.custom);
-      variant = controlVariant ? Object.assign(controlVariant || {}, variant) : variant;
+      resolvedVariant = controlVariant ? Object.assign(controlVariant || {}, variant) : variant;
     }
-    if (!variant)
+    if (!resolvedVariant)
       return;
-    Object.assign(transition, variant.transition);
-    Object.entries(variant).forEach(([key, value]) => {
-      if (key === "transition")
-        return;
-      this.target[key] = value;
-      transitionOptions[key] = getOptions(transition, key);
-    });
+    if (name !== "initial")
+      variantTransition = resolvedVariant.transition || this.options.transition;
+    variant = Object.assign(variant, resolvedVariant);
+  });
+  Object.assign(transition, variantTransition);
+  Object.entries(variant).forEach(([key, value]) => {
+    if (key === "transition")
+      return;
+    this.target[key] = value;
+    transitionOptions[key] = getOptions(transition, key);
   });
   return transitionOptions;
 }
@@ -107,25 +120,22 @@ function setupChildAnimations(transition, controlActiveState, isFallback) {
     childAnimations
   };
 }
-function executeAnimations(factories, getChildAnimations, childAnimations, transition, controlActiveState) {
-  let animations;
-  const getAnimation = () => {
-    animations = factories.map((factory) => factory()).filter(Boolean);
-    return Promise.all(animations);
-  };
-  const isExit = this.activeStates.exit;
+function executeAnimations({
+  factories,
+  getChildAnimations,
+  childAnimations,
+  transition,
+  controlActiveState,
+  isExit = false
+}) {
+  const getAnimation = () => Promise.all(factories.map((factory) => factory()).filter(Boolean));
   const animationTarget = { ...this.target };
   const element = this.element;
   const finishAnimation = (animationPromise) => {
-    if (!(animations == null ? void 0 : animations.length) && !childAnimations.length) {
-      if (isExit) {
-        element.dispatchEvent(motionEvent("motionstart", animationTarget));
-        element.dispatchEvent(motionEvent("motioncomplete", animationTarget, isExit));
-      }
-      return;
-    }
     element.dispatchEvent(motionEvent("motionstart", animationTarget));
-    animationPromise.then(() => element.dispatchEvent(motionEvent("motioncomplete", animationTarget, isExit))).catch(noop);
+    animationPromise.then(() => {
+      element.dispatchEvent(motionEvent("motioncomplete", animationTarget, isExit));
+    }).catch(noop);
   };
   const getAnimationPromise = () => {
     const animationPromise = (transition == null ? void 0 : transition.when) ? (transition.when === "beforeChildren" ? getAnimation() : getChildAnimations()).then(() => transition.when === "beforeChildren" ? getChildAnimations() : getAnimation()) : Promise.all([getAnimation(), getChildAnimations()]);

package/dist/es/state/motion-state.mjs

@@ -29,7 +29,7 @@ class MotionState {
     this.parent = parent;
     (_a = parent == null ? void 0 : parent.children) == null ? void 0 : _a.add(this);
     this.depth = (parent == null ? void 0 : parent.depth) + 1 || 0;
-    const initialVariantSource = this.context.initial === false ? "animate" : "initial";
+    const initialVariantSource = this.context.initial === false ? ["initial", "animate"] : ["initial"];
     this.initTarget(initialVariantSource);
     this.visualElement = createVisualElement(this.options.as, {
       presenceContext: null,
@@ -71,7 +71,12 @@ class MotionState {
   }
   // Initialize animation target values
   initTarget(initialVariantSource) {
-    this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
+    this.baseTarget = initialVariantSource.reduce((acc, variant) => {
+      return {
+        ...acc,
+        ...resolveVariant(this.options[variant] || this.context[variant], this.options.variants)
+      };
+    }, {});
     this.target = {};
   }
   // Update visual element with new options
@@ -187,7 +192,8 @@ class MotionState {
     });
     if (isAnimate) {
       this.animateUpdates({
-        isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants
+        isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants,
+        isExit: this.activeStates.exit
       });
     }
   }

package/dist/es/state/utils.mjs

@@ -104,19 +104,23 @@ function isAnimateChanged(oldOptions, newOptions) {
   const newAnimate = newOptions.animate;
   if (oldAnimate === newAnimate)
     return false;
-  if (!oldAnimate || !newAnimate)
+  if (!oldAnimate || !newAnimate) {
     return true;
+  }
   if (typeof oldAnimate === "object" || typeof newAnimate === "object") {
     const oldKeys = Object.keys(oldAnimate);
     const newKeys = Object.keys(newAnimate);
     if (oldKeys.length !== newKeys.length)
       return true;
     return oldKeys.some((key) => {
+      if (key === "transition")
+        return false;
       const oldVal = oldAnimate[key];
       const newVal = newAnimate[key];
       return oldVal !== newVal;
     });
   }
+  console.log(2344);
   return oldAnimate !== newAnimate;
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.11.1",
+  "version": "0.11.2",
   "description": "",
   "author": "",
   "license": "MIT",