motion-v 0.11.0-beta.4 → 0.11.0-beta.6

package/dist/cjs/index.js

@@ -4875,7 +4875,7 @@ function stagger(duration = 0.1, { startDelay = 0, from = 0, ease: ease2 } = {})
     return startDelay + delay2;
   };
 }
-function delay(callback, timeout) {
+function delay$1(callback, timeout) {
   const start = time.now();
   const checkElapsed = ({ timestamp }) => {
     const elapsed = timestamp - start;
@@ -4888,7 +4888,7 @@ function delay(callback, timeout) {
   return () => cancelFrame(checkElapsed);
 }
 function delayInSeconds(callback, timeout) {
-  return delay(callback, secondsToMilliseconds$1(timeout));
+  return delay$1(callback, secondsToMilliseconds$1(timeout));
 }
 const distance = (a, b) => Math.abs(a - b);
 function distance2D(a, b) {
@@ -4984,10 +4984,37 @@ function millisecondsToSeconds(milliseconds) {
 function getContextWindow({ current }) {
   return current ? current.ownerDocument.defaultView : null;
 }
+function getMotionElement(el) {
+  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
+    return getMotionElement(el.nextSibling);
+  return el;
+}
+function useDomRef() {
+  const dom = vue.ref(null);
+  const domProxy = new Proxy(dom, {
+    get(target, key) {
+      if (typeof key === "string" || typeof key === "symbol") {
+        return Reflect.get(target, key);
+      }
+      return void 0;
+    },
+    set(target, key, value) {
+      if (key === "value")
+        return Reflect.set(target, key, getMotionElement((value == null ? void 0 : value.$el) || value));
+      return true;
+    }
+  });
+  return domProxy;
+}
 const [injectMotion, provideMotion] = createContext("Motion");
 const [injectLayoutGroup, provideLayoutGroup] = createContext("LayoutGroup");
 function resolveVariant(definition, variants, custom) {
-  if (typeof definition === "object") {
+  if (Array.isArray(definition)) {
+    return definition.reduce((acc, item) => {
+      const resolvedVariant = resolveVariant(item, variants, custom);
+      return resolvedVariant ? { ...acc, ...resolvedVariant } : acc;
+    }, {});
+  } else if (typeof definition === "object") {
     return definition;
   } else if (definition && variants) {
     const variant = variants[definition];
@@ -5012,7 +5039,7 @@ function shallowCompare(next, prev) {
   return true;
 }
 function getOptions(options, key) {
-  return options[key] ? { ...options, ...options[key] } : { ...options };
+  return options[key] ? { ...options, ...options[key], [key]: void 0 } : { ...options };
 }
 function isCssVar(name) {
   return name == null ? void 0 : name.startsWith("--");
@@ -6422,22 +6449,22 @@ class LayoutFeature extends Feature {
   }
   didUpdate() {
     var _a, _b;
-    if (this.state.options.layout || this.state.options.layoutId)
+    if (this.state.options.layout || this.state.options.layoutId || this.state.options.drag)
       (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
   }
   mount() {
     var _a;
     const options = this.state.options;
     const layoutGroup = this.state.options.layoutGroup;
-    if (options.layout || options.layoutId || options.drag) {
+    if (options.layout || options.layoutId) {
       const projection = this.state.visualElement.projection;
       if (projection) {
         projection.promote();
         (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
       }
-      this.didUpdate();
       globalProjectionState.hasEverUpdated = true;
     }
+    this.didUpdate();
   }
   beforeUnmount() {
     const projection = this.state.visualElement.projection;
@@ -6452,11 +6479,16 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
+    var _a, _b;
     const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
-    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection) {
-      layoutGroup.group.remove(projection);
-    } else {
+    if (projection) {
+      if (layoutGroup == null ? void 0 : layoutGroup.group) {
+        layoutGroup.group.remove(projection);
+      }
+      if ((_b = (_a = projection.getStack()) == null ? void 0 : _a.lead) == null ? void 0 : _b.animationProgress) {
+        return;
+      }
       this.didUpdate();
     }
   }
@@ -6971,7 +7003,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
         attachResizeListener(instance, () => {
           this.root.updateBlockedByResize = true;
           cancelDelay && cancelDelay();
-          cancelDelay = delay(resizeUnblockUpdate, 250);
+          cancelDelay = delay$1(resizeUnblockUpdate, 250);
           if (globalProjectionState.hasAnimatedSinceResize) {
             globalProjectionState.hasAnimatedSinceResize = false;
             this.nodes.forEach(finishAnimation);
@@ -8168,12 +8200,14 @@ function setupChildAnimations(transition, controlActiveState, isFallback) {
   const childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
     const childDelay = delayChildren + generateStaggerDuration(index);
     return child.state.animateUpdates({
-      controlActiveState: this.activeStates,
+      controlActiveState,
       controlDelay: isFallback ? 0 : childDelay
     });
   }).filter(Boolean);
   return {
-    getChildAnimations: () => Promise.all(childAnimations.map((animation) => animation())),
+    getChildAnimations: () => Promise.all(childAnimations.map((animation) => {
+      return typeof animation === "function" ? animation() : animation;
+    })),
     childAnimations
   };
 }
@@ -8204,6 +8238,9 @@ function executeAnimations(factories, getChildAnimations, childAnimations, trans
   };
   return controlActiveState ? getAnimationPromise : getAnimationPromise();
 }
+function isVariantLabels(value) {
+  return typeof value === "string" || Array.isArray(value);
+}
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 const mountedLayoutIds = /* @__PURE__ */ new Set();
@@ -8225,6 +8262,8 @@ 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 = options.initial === false ? "animate" : "initial";
+    this.initTarget(initialVariantSource);
     this.visualElement = createVisualElement(this.options.as, {
       presenceContext: null,
       parent: parent == null ? void 0 : parent.visualElement,
@@ -8242,12 +8281,12 @@ class MotionState {
           vars: {},
           attrs: {}
         },
-        latestValues: {}
+        latestValues: {
+          ...this.baseTarget
+        }
       },
       reducedMotionConfig: options.motionConfig.reduceMotion
     });
-    const initialVariantSource = options.initial === false ? "animate" : "initial";
-    this.initTarget(initialVariantSource);
     this.featureManager = new FeatureManager(this);
   }
   // Get animation context, falling back to parent context for inheritance
@@ -8256,7 +8295,7 @@ class MotionState {
       const handler = {
         get: (target, prop) => {
           var _a;
-          return typeof this.options[prop] === "string" ? this.options[prop] : (_a = this.parent) == null ? void 0 : _a.context[prop];
+          return isVariantLabels(this.options[prop]) ? this.options[prop] : (_a = this.parent) == null ? void 0 : _a.context[prop];
         }
       };
       this._context = new Proxy({}, handler);
@@ -8266,9 +8305,6 @@ class MotionState {
   // Initialize animation target values
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
-    for (const key in this.baseTarget) {
-      this.visualElement.setStaticValue(key, this.baseTarget[key]);
-    }
     this.target = {};
   }
   // Update visual element with new options
@@ -8322,34 +8358,26 @@ class MotionState {
   unmount(unMountChildren = false) {
     const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId);
     const unmount = () => {
-      var _a, _b, _c;
-      mountedStates.delete(this.element);
-      this.featureManager.unmount();
-      if (unMountChildren && !shouldDelay) {
-        frame.render(() => {
-          var _a2;
-          (_a2 = this.visualElement) == null ? void 0 : _a2.unmount();
-        });
-      } else {
-        (_a = this.visualElement) == null ? void 0 : _a.unmount();
-      }
       if (unMountChildren) {
-        const unmountChild = (child) => {
-          var _a2;
-          child.unmount(true);
-          (_a2 = child.children) == null ? void 0 : _a2.forEach(unmountChild);
-        };
-        Array.from(this.children).forEach(unmountChild);
+        Array.from(this.children).reverse().forEach(this.unmountChild);
+      }
+      const unmountState = () => {
+        var _a, _b, _c;
+        (_b = (_a = this.parent) == null ? void 0 : _a.children) == null ? void 0 : _b.delete(this);
+        mountedStates.delete(this.element);
+        this.featureManager.unmount();
+        (_c = this.visualElement) == null ? void 0 : _c.unmount();
+      };
+      if (shouldDelay) {
+        Promise.resolve().then(unmountState);
+      } else {
+        unmountState();
       }
-      (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
     };
-    if (shouldDelay) {
-      Promise.resolve().then(() => {
-        unmount();
-      });
-    } else {
-      unmount();
-    }
+    unmount();
+  }
+  unmountChild(child) {
+    child.unmount(true);
   }
   // Called before updating, executes in parent-to-child order
   beforeUpdate() {
@@ -8376,7 +8404,7 @@ class MotionState {
     });
     if (isAnimate) {
       this.animateUpdates({
-        isFallback: !isActive
+        isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants
       });
     }
   }
@@ -8394,11 +8422,6 @@ class MotionState {
     }
   }
 }
-function getMotionElement(el) {
-  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
-    return getMotionElement(el.nextSibling);
-  return el;
-}
 function checkMotionIsHidden(instance) {
   var _a;
   const isHidden = ((_a = getMotionElement(instance.$el)) == null ? void 0 : _a.style.display) === "none";
@@ -8425,7 +8448,7 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     asChild: { type: Boolean },
     whileDrag: {},
     custom: {},
-    initial: { type: [String, Object, Boolean] },
+    initial: { type: [String, Array, Object, Boolean] },
     animate: {},
     exit: {},
     variants: {},
@@ -8562,9 +8585,6 @@ const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
         Object.assign(attrsProps, attributes);
         Object.assign(styleProps, style2);
       }
-      if (!state2.isMounted()) {
-        Object.assign(styleProps, state2.baseTarget);
-      }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
           userSelect: "none",
@@ -8699,6 +8719,11 @@ function usePopLayout(props) {
     styles
   };
 }
+function delay(fn) {
+  return Promise.resolve().then(() => {
+    fn();
+  });
+}
 const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
   ...{
     name: "AnimatePresence",
@@ -8734,20 +8759,21 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
       removePopStyle(state2);
       state2.isVShow = true;
       removeDoneCallback(el);
-      state2.setActive("exit", false);
+      delay(() => {
+        state2.setActive("exit", false);
+      });
     }
     const exitDom = /* @__PURE__ */ new Map();
     vue.onUnmounted(() => {
       exitDom.clear();
     });
     function exit(el, done) {
-      let state2 = mountedStates.get(el);
-      if (!state2) {
-        if (!props.unwrapElement) {
-          return done();
-        }
+      if (props.unwrapElement) {
         el = el.firstElementChild;
-        state2 = mountedStates.get(el);
+      }
+      const state2 = mountedStates.get(el);
+      if (!state2) {
+        return done();
       }
       exitDom.set(el, true);
       removeDoneCallback(el);
@@ -8770,14 +8796,16 @@ const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
             removePopStyle(state2);
           }
           done();
-          if (!(el == null ? void 0 : el.isConnected)) {
+          if (!el.isConnected) {
             state2.unmount(true);
           }
         }
       }
       doneCallbacks.set(el, doneCallback);
       el.addEventListener("motioncomplete", doneCallback);
-      state2.setActive("exit", true);
+      delay(() => {
+        state2.setActive("exit", true);
+      });
     }
     const transitionProps = vue.computed(() => {
       if (props.multiple) {
@@ -8878,7 +8906,7 @@ const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     asChild: { type: Boolean },
     whileDrag: {},
     custom: {},
-    initial: { type: [String, Object, Boolean] },
+    initial: { type: [String, Array, Object, Boolean] },
     animate: {},
     exit: {},
     variants: {},
@@ -9202,7 +9230,7 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     asChild: { type: Boolean },
     whileDrag: { default: void 0 },
     custom: {},
-    initial: { type: [String, Object, Boolean], default: void 0 },
+    initial: { type: [String, Array, Object, Boolean], default: void 0 },
     animate: { default: void 0 },
     exit: {},
     variants: {},
@@ -9533,6 +9561,8 @@ function animationControls() {
 function setValues(state2, definition) {
   if (typeof definition === "string") {
     return setVariants(state2, [definition]);
+  } else if (Array.isArray(definition)) {
+    return setVariants(state2, definition);
   } else {
     setStateTarget(state2, definition);
     setTarget(state2.visualElement, definition);
@@ -9673,6 +9703,7 @@ exports.useAnimationControls = useAnimationControls;
 exports.useAnimationFrame = useAnimationFrame;
 exports.useCombineMotionValues = useCombineMotionValues;
 exports.useComputed = useComputed;
+exports.useDomRef = useDomRef;
 exports.useDragControls = useDragControls;
 exports.useInView = useInView;
 exports.useLayoutGroup = useLayoutGroup;

package/dist/es/animation/hooks/animation-controls.mjs

@@ -64,6 +64,8 @@ function animationControls() {
 function setValues(state, definition) {
   if (typeof definition === "string") {
     return setVariants(state, [definition]);
+  } else if (Array.isArray(definition)) {
+    return setVariants(state, definition);
   } else {
     setStateTarget(state, definition);
     setTarget(state.visualElement, definition);

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

@@ -2,6 +2,7 @@ import { defineComponent, onMounted, onUnmounted, computed, openBlock, createBlo
 import { mountedStates } from "../../state/motion-state.mjs";
 import { provideAnimatePresence, removeDoneCallback, doneCallbacks } from "../presence.mjs";
 import { usePopLayout } from "./use-pop-layout.mjs";
+import { delay } from "../../utils/delay.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AnimatePresence",
@@ -37,20 +38,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       removePopStyle(state);
       state.isVShow = true;
       removeDoneCallback(el);
-      state.setActive("exit", false);
+      delay(() => {
+        state.setActive("exit", false);
+      });
     }
     const exitDom = /* @__PURE__ */ new Map();
     onUnmounted(() => {
       exitDom.clear();
     });
     function exit(el, done) {
-      let state = mountedStates.get(el);
-      if (!state) {
-        if (!props.unwrapElement) {
-          return done();
-        }
+      if (props.unwrapElement) {
         el = el.firstElementChild;
-        state = mountedStates.get(el);
+      }
+      const state = mountedStates.get(el);
+      if (!state) {
+        return done();
       }
       exitDom.set(el, true);
       removeDoneCallback(el);
@@ -73,14 +75,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             removePopStyle(state);
           }
           done();
-          if (!(el == null ? void 0 : el.isConnected)) {
+          if (!el.isConnected) {
             state.unmount(true);
           }
         }
       }
       doneCallbacks.set(el, doneCallback);
       el.addEventListener("motioncomplete", doneCallback);
-      state.setActive("exit", true);
+      delay(() => {
+        state.setActive("exit", true);
+      });
     }
     const transitionProps = computed(() => {
       if (props.multiple) {

package/dist/es/components/hooks/use-motion-elm.mjs

@@ -0,0 +1,9 @@
+import "vue";
+function getMotionElement(el) {
+  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
+    return getMotionElement(el.nextSibling);
+  return el;
+}
+export {
+  getMotionElement
+};

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

@@ -4,8 +4,9 @@ import { convertSvgStyleToAttributes, createStyles } from "../../state/style.mjs
 import { Primitive } from "./Primitive.mjs";
 import { MotionState } from "../../state/motion-state.mjs";
 import { injectAnimatePresence } from "../presence.mjs";
-import { getMotionElement, checkMotionIsHidden } from "./utils.mjs";
+import { checkMotionIsHidden } from "./utils.mjs";
 import { useMotionConfig } from "../motion-config/context.mjs";
+import { getMotionElement } from "../hooks/use-motion-elm.mjs";
 import { isMotionValue } from "../../utils/motion-value.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
@@ -18,7 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     asChild: { type: Boolean },
     whileDrag: {},
     custom: {},
-    initial: { type: [String, Object, Boolean] },
+    initial: { type: [String, Array, Object, Boolean] },
     animate: {},
     exit: {},
     variants: {},
@@ -155,9 +156,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         Object.assign(attrsProps, attributes);
         Object.assign(styleProps, style);
       }
-      if (!state.isMounted()) {
-        Object.assign(styleProps, state.baseTarget);
-      }
       if (props.drag && props.dragListener !== false) {
         Object.assign(styleProps, {
           userSelect: "none",

package/dist/es/components/motion/utils.d.ts

@@ -1,5 +1,4 @@
 import { ComponentPublicInstance } from 'vue';
-export declare function getMotionElement(el: HTMLElement): HTMLElement;
 /**
  * 检查是否是隐藏的 motion 元素
  * @param instance

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

@@ -1,8 +1,4 @@
-function getMotionElement(el) {
-  if ((el == null ? void 0 : el.nodeType) === 3 || (el == null ? void 0 : el.nodeType) === 8)
-    return getMotionElement(el.nextSibling);
-  return el;
-}
+import { getMotionElement } from "../hooks/use-motion-elm.mjs";
 function checkMotionIsHidden(instance) {
   var _a;
   const isHidden = ((_a = getMotionElement(instance.$el)) == null ? void 0 : _a.style.display) === "none";
@@ -10,6 +6,5 @@ function checkMotionIsHidden(instance) {
   return hasTransition && isHidden;
 }
 export {
-  checkMotionIsHidden,
-  getMotionElement
+  checkMotionIsHidden
 };

package/dist/es/components/reorder/Group.vue.mjs

@@ -17,7 +17,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     asChild: { type: Boolean },
     whileDrag: {},
     custom: {},
-    initial: { type: [String, Object, Boolean] },
+    initial: { type: [String, Array, Object, Boolean] },
     animate: {},
     exit: {},
     variants: {},

package/dist/es/components/reorder/Item.d.ts

@@ -51,10 +51,10 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__
     layoutScroll: boolean;
     layoutRoot: boolean;
     crossfade: boolean;
-    initial: string | import('../../types').Variant | boolean;
-    animate: string | import('../../types').Variant | import('../../animation/types').AnimationControls;
-    inView: string | import('../../types').Variant;
-    hover: string | import('../../types').Variant;
+    initial: import('../../types').VariantLabels | import('../../types').Variant | boolean;
+    animate: import('../../types').VariantLabels | import('../../types').Variant | import('../../animation/types').AnimationControls;
+    inView: import('../../types').VariantLabels | import('../../types').Variant;
+    hover: import('../../types').VariantLabels | import('../../types').Variant;
     whileDrag: import('../../types').Options["whileDrag"];
     dragElastic: number;
     dragMomentum: boolean;

package/dist/es/components/reorder/Item.vue.mjs

@@ -17,7 +17,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     asChild: { type: Boolean },
     whileDrag: { default: void 0 },
     custom: {},
-    initial: { type: [String, Object, Boolean], default: void 0 },
+    initial: { type: [String, Array, Object, Boolean], default: void 0 },
     animate: { default: void 0 },
     exit: {},
     variants: {},

package/dist/es/features/gestures/drag/types.d.ts

@@ -1,5 +1,5 @@
 import { DragControls } from './use-drag-controls';
-import { Variant } from '../../../types';
+import { Variant, VariantLabels } from '../../../types';
 import { Axis, BoundingBox, DragElastic, InertiaOptions, PanInfo } from 'framer-motion';
 export interface ResolvedConstraints {
     x: Partial<Axis>;
@@ -221,5 +221,5 @@ export interface DragProps extends DragHandlers {
      * ```
      */
     dragControls?: DragControls;
-    whileDrag?: string | Variant;
+    whileDrag?: VariantLabels | Variant;
 }

package/dist/es/features/gestures/focus/types.d.ts

@@ -1,6 +1,6 @@
-import { Variant } from '../../../types';
+import { Variant, VariantLabels } from '../../../types';
 export type FocusProps = {
-    focus?: string | Variant;
+    focus?: VariantLabels | Variant;
     onFocus?: (e: FocusEvent) => void;
     onBlur?: (e: FocusEvent) => void;
 };

package/dist/es/features/gestures/hover/types.d.ts

@@ -1,8 +1,8 @@
-import { Variant } from '../../../types';
+import { Variant, VariantLabels } from '../../../types';
 import { EventInfo } from 'framer-motion';
 export type HoverEvent = (event: MouseEvent, info: EventInfo) => void;
 export interface HoverProps {
-    hover?: string | Variant;
+    hover?: VariantLabels | Variant;
     onHoverStart?: HoverEvent;
     onHoverEnd?: HoverEvent;
 }

package/dist/es/features/gestures/in-view/types.d.ts

@@ -1,4 +1,4 @@
-import { Variant } from '../../../types';
+import { Variant, VariantLabels } from '../../../types';
 type MarginValue = `${number}${'px' | '%'}`;
 type MarginType = MarginValue | `${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue}` | `${MarginValue} ${MarginValue} ${MarginValue} ${MarginValue}`;
 export interface InViewOptions {
@@ -11,7 +11,7 @@ export interface InViewProps {
     inViewOptions?: InViewOptions & {
         once?: boolean;
     };
-    inView?: string | Variant;
+    inView?: VariantLabels | Variant;
     onViewportEnter?: ViewportEventHandler;
     onViewportLeave?: ViewportEventHandler;
 }

package/dist/es/features/gestures/press/types.d.ts

@@ -1,4 +1,4 @@
-import { Variant } from '../../../types';
+import { Variant, VariantLabels } from '../../../types';
 import { EventInfo } from 'framer-motion';
 export type PressEvent = (event: PointerEvent, info: EventInfo) => void;
 export interface PressProps {
@@ -6,7 +6,7 @@ export interface PressProps {
      * If `true`, the press gesture will attach its start listener to window.
      */
     globalPressTarget?: boolean;
-    press?: string | Variant;
+    press?: VariantLabels | Variant;
     onPressStart?: PressEvent;
     onPress?: PressEvent;
     onPressCancel?: PressEvent;

package/dist/es/features/layout/layout.mjs

@@ -15,22 +15,22 @@ class LayoutFeature extends Feature {
   }
   didUpdate() {
     var _a, _b;
-    if (this.state.options.layout || this.state.options.layoutId)
+    if (this.state.options.layout || this.state.options.layoutId || this.state.options.drag)
       (_b = (_a = this.state.visualElement.projection) == null ? void 0 : _a.root) == null ? void 0 : _b.didUpdate();
   }
   mount() {
     var _a;
     const options = this.state.options;
     const layoutGroup = this.state.options.layoutGroup;
-    if (options.layout || options.layoutId || options.drag) {
+    if (options.layout || options.layoutId) {
       const projection = this.state.visualElement.projection;
       if (projection) {
         projection.promote();
         (_a = layoutGroup == null ? void 0 : layoutGroup.group) == null ? void 0 : _a.add(projection);
       }
-      this.didUpdate();
       globalProjectionState.hasEverUpdated = true;
     }
+    this.didUpdate();
   }
   beforeUnmount() {
     const projection = this.state.visualElement.projection;
@@ -45,11 +45,16 @@ class LayoutFeature extends Feature {
     }
   }
   unmount() {
+    var _a, _b;
     const layoutGroup = this.state.options.layoutGroup;
     const projection = this.state.visualElement.projection;
-    if ((layoutGroup == null ? void 0 : layoutGroup.group) && projection) {
-      layoutGroup.group.remove(projection);
-    } else {
+    if (projection) {
+      if (layoutGroup == null ? void 0 : layoutGroup.group) {
+        layoutGroup.group.remove(projection);
+      }
+      if ((_b = (_a = projection.getStack()) == null ? void 0 : _a.lead) == null ? void 0 : _b.animationProgress) {
+        return;
+      }
       this.didUpdate();
     }
   }

package/dist/es/index.mjs

@@ -62,6 +62,7 @@ import { useInView } from "./utils/use-in-view.mjs";
 import { useAnimationFrame } from "./utils/use-animation-frame.mjs";
 import { millisecondsToSeconds, secondsToMilliseconds } from "./utils/time-conversion.mjs";
 import { getContextWindow } from "./utils/get-context-window.mjs";
+import { useDomRef } from "./utils/use-dom-ref.mjs";
 export {
   default5 as AnimatePresence,
   default2 as LayoutGroup,
@@ -135,6 +136,7 @@ export {
   useAnimationFrame,
   useCombineMotionValues,
   useComputed,
+  useDomRef,
   useDragControls,
   useInView,
   useLayoutGroup,

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

@@ -88,12 +88,14 @@ function setupChildAnimations(transition, controlActiveState, isFallback) {
   const childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
     const childDelay = delayChildren + generateStaggerDuration(index);
     return child.state.animateUpdates({
-      controlActiveState: this.activeStates,
+      controlActiveState,
       controlDelay: isFallback ? 0 : childDelay
     });
   }).filter(Boolean);
   return {
-    getChildAnimations: () => Promise.all(childAnimations.map((animation) => animation())),
+    getChildAnimations: () => Promise.all(childAnimations.map((animation) => {
+      return typeof animation === "function" ? animation() : animation;
+    })),
     childAnimations
   };
 }

package/dist/es/state/motion-state.d.ts

@@ -29,6 +29,7 @@ export declare class MotionState {
     mount(element: HTMLElement, options: Options, notAnimate?: boolean): void;
     beforeUnmount(): void;
     unmount(unMountChildren?: boolean): void;
+    private unmountChild;
     beforeUpdate(): void;
     update(options: Options): void;
     setActive(name: StateType, isActive: boolean, isAnimate?: boolean): void;

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

@@ -5,6 +5,7 @@ import { FeatureManager } from "../features/feature-manager.mjs";
 import { createVisualElement } from "./create-visual-element.mjs";
 import { doneCallbacks } from "../components/presence.mjs";
 import { animateUpdates } from "./animate-updates.mjs";
+import { isVariantLabels } from "./utils/is-variant-labels.mjs";
 import { frame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
@@ -27,6 +28,8 @@ 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 = options.initial === false ? "animate" : "initial";
+    this.initTarget(initialVariantSource);
     this.visualElement = createVisualElement(this.options.as, {
       presenceContext: null,
       parent: parent == null ? void 0 : parent.visualElement,
@@ -44,12 +47,12 @@ class MotionState {
           vars: {},
           attrs: {}
         },
-        latestValues: {}
+        latestValues: {
+          ...this.baseTarget
+        }
       },
       reducedMotionConfig: options.motionConfig.reduceMotion
     });
-    const initialVariantSource = options.initial === false ? "animate" : "initial";
-    this.initTarget(initialVariantSource);
     this.featureManager = new FeatureManager(this);
   }
   // Get animation context, falling back to parent context for inheritance
@@ -58,7 +61,7 @@ class MotionState {
       const handler = {
         get: (target, prop) => {
           var _a;
-          return typeof this.options[prop] === "string" ? this.options[prop] : (_a = this.parent) == null ? void 0 : _a.context[prop];
+          return isVariantLabels(this.options[prop]) ? this.options[prop] : (_a = this.parent) == null ? void 0 : _a.context[prop];
         }
       };
       this._context = new Proxy({}, handler);
@@ -68,9 +71,6 @@ class MotionState {
   // Initialize animation target values
   initTarget(initialVariantSource) {
     this.baseTarget = resolveVariant(this.options[initialVariantSource] || this.context[initialVariantSource], this.options.variants) || {};
-    for (const key in this.baseTarget) {
-      this.visualElement.setStaticValue(key, this.baseTarget[key]);
-    }
     this.target = {};
   }
   // Update visual element with new options
@@ -124,34 +124,26 @@ class MotionState {
   unmount(unMountChildren = false) {
     const shouldDelay = this.options.layoutId && !mountedLayoutIds.has(this.options.layoutId);
     const unmount = () => {
-      var _a, _b, _c;
-      mountedStates.delete(this.element);
-      this.featureManager.unmount();
-      if (unMountChildren && !shouldDelay) {
-        frame.render(() => {
-          var _a2;
-          (_a2 = this.visualElement) == null ? void 0 : _a2.unmount();
-        });
-      } else {
-        (_a = this.visualElement) == null ? void 0 : _a.unmount();
-      }
       if (unMountChildren) {
-        const unmountChild = (child) => {
-          var _a2;
-          child.unmount(true);
-          (_a2 = child.children) == null ? void 0 : _a2.forEach(unmountChild);
-        };
-        Array.from(this.children).forEach(unmountChild);
+        Array.from(this.children).reverse().forEach(this.unmountChild);
+      }
+      const unmountState = () => {
+        var _a, _b, _c;
+        (_b = (_a = this.parent) == null ? void 0 : _a.children) == null ? void 0 : _b.delete(this);
+        mountedStates.delete(this.element);
+        this.featureManager.unmount();
+        (_c = this.visualElement) == null ? void 0 : _c.unmount();
+      };
+      if (shouldDelay) {
+        Promise.resolve().then(unmountState);
+      } else {
+        unmountState();
       }
-      (_c = (_b = this.parent) == null ? void 0 : _b.children) == null ? void 0 : _c.delete(this);
     };
-    if (shouldDelay) {
-      Promise.resolve().then(() => {
-        unmount();
-      });
-    } else {
-      unmount();
-    }
+    unmount();
+  }
+  unmountChild(child) {
+    child.unmount(true);
   }
   // Called before updating, executes in parent-to-child order
   beforeUpdate() {
@@ -178,7 +170,7 @@ class MotionState {
     });
     if (isAnimate) {
       this.animateUpdates({
-        isFallback: !isActive
+        isFallback: !isActive && name !== "exit" && this.visualElement.isControllingVariants
       });
     }
   }

package/dist/es/state/utils/is-variant-labels.d.ts

@@ -0,0 +1,2 @@
+import { VariantLabels } from '../../types';
+export declare function isVariantLabels(value: any): value is VariantLabels;

package/dist/es/state/utils/is-variant-labels.mjs

@@ -0,0 +1,6 @@
+function isVariantLabels(value) {
+  return typeof value === "string" || Array.isArray(value);
+}
+export {
+  isVariantLabels
+};

package/dist/es/state/utils.mjs

@@ -1,5 +1,10 @@
 function resolveVariant(definition, variants, custom) {
-  if (typeof definition === "object") {
+  if (Array.isArray(definition)) {
+    return definition.reduce((acc, item) => {
+      const resolvedVariant = resolveVariant(item, variants, custom);
+      return resolvedVariant ? { ...acc, ...resolvedVariant } : acc;
+    }, {});
+  } else if (typeof definition === "object") {
     return definition;
   } else if (definition && variants) {
     const variant = variants[definition];
@@ -24,7 +29,7 @@ function shallowCompare(next, prev) {
   return true;
 }
 function getOptions(options, key) {
-  return options[key] ? { ...options, ...options[key] } : { ...options };
+  return options[key] ? { ...options, ...options[key], [key]: void 0 } : { ...options };
 }
 function isCssVar(name) {
   return name == null ? void 0 : name.startsWith("--");

package/dist/es/types/framer-motion.d.ts

@@ -1,4 +1,5 @@
 import { Inertia, Keyframes, None, Repeat, Spring, Tween } from 'framer-motion';
+export type { Point } from 'framer-motion';
 export interface FrameData {
     delta: number;
     timestamp: number;
@@ -40,4 +41,3 @@ type TransitionMap = Orchestration & TransitionDefinition & {
     [key: string]: TransitionDefinition;
 };
 export type $Transition = (Orchestration & Repeat & TransitionDefinition) | (Orchestration & Repeat & TransitionMap);
-export {};

package/dist/es/types/state.d.ts

@@ -17,7 +17,11 @@ export type TargetResolver = (custom: any, current: Target, velocity: Target) =>
 export interface Variant extends DOMKeyframesDefinition {
     transition?: $Transition;
 }
-export type VariantLabels = string | Variant;
+/**
+ * Either a string, or array of strings, that reference variants defined via the `variants` prop.
+ * @public
+ */
+export type VariantLabels = string | string[];
 interface BoundingBox {
     top: number;
     right: number;
@@ -28,16 +32,17 @@ export interface DragOptions {
     constraints?: false | Partial<BoundingBox>;
     dragSnapToOrigin?: boolean;
 }
+type TransformPropertiesWithoutTransition = Omit<TransformProperties, 'transition'>;
 export type MotionStyle = Partial<{
-    [K in keyof Variant]: Variant[K] | MotionValue;
+    [K in keyof (Variant & TransformPropertiesWithoutTransition)]: string | number | undefined | MotionValue;
 }>;
 export type ElementType = keyof IntrinsicElementAttributes;
 export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps, InViewProps, DragProps, PanProps, FocusProps {
     custom?: T;
     as?: ElementType;
-    initial?: string | Variant | boolean;
-    animate?: string | Variant | AnimationControls;
-    exit?: string | Variant;
+    initial?: VariantLabels | Variant | boolean;
+    animate?: VariantLabels | Variant | AnimationControls;
+    exit?: VariantLabels | Variant;
     variants?: {
         [k: string]: Variant | ((custom: T) => Variant);
     };
@@ -52,12 +57,12 @@ export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps,
     onUpdate?: (latest: ResolvedValues) => void;
 }
 export interface MotionStateContext {
-    initial?: string;
-    animate?: string;
-    inView?: string;
-    hover?: string;
-    press?: string;
-    exit?: string;
+    initial?: VariantLabels;
+    animate?: VariantLabels;
+    inView?: VariantLabels;
+    hover?: VariantLabels;
+    press?: VariantLabels;
+    exit?: VariantLabels;
 }
 export type AnimationFactory = () => AnimationPlaybackControls | undefined;
 export interface CssPropertyDefinition {

package/dist/es/utils/delay.d.ts

@@ -0,0 +1 @@
+export declare function delay(fn: () => void): Promise<void>;

package/dist/es/utils/delay.mjs

@@ -0,0 +1,8 @@
+function delay(fn) {
+  return Promise.resolve().then(() => {
+    fn();
+  });
+}
+export {
+  delay
+};

package/dist/es/utils/index.d.ts

@@ -4,3 +4,4 @@ export * from './use-in-view';
 export * from './use-animation-frame';
 export * from './time-conversion';
 export * from './get-context-window';
+export * from './use-dom-ref';

package/dist/es/utils/use-dom-ref.d.ts

@@ -1 +1 @@
-export declare function useDomRef<T extends Element = any>(): import('vue').Ref<import('vue').UnwrapRef<T>>;
+export declare function useDomRef(): import('vue').Ref<any>;

package/dist/es/utils/use-dom-ref.mjs

@@ -0,0 +1,22 @@
+import { getMotionElement } from "../components/hooks/use-motion-elm.mjs";
+import { ref } from "vue";
+function useDomRef() {
+  const dom = ref(null);
+  const domProxy = new Proxy(dom, {
+    get(target, key) {
+      if (typeof key === "string" || typeof key === "symbol") {
+        return Reflect.get(target, key);
+      }
+      return void 0;
+    },
+    set(target, key, value) {
+      if (key === "value")
+        return Reflect.set(target, key, getMotionElement((value == null ? void 0 : value.$el) || value));
+      return true;
+    }
+  });
+  return domProxy;
+}
+export {
+  useDomRef
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motion-v",
-  "version": "0.11.0-beta.4",
+  "version": "0.11.0-beta.6",
   "description": "",
   "author": "",
   "license": "MIT",