motion-v 0.7.0 → 0.8.0

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

@@ -0,0 +1,68 @@
+import { MotionState } from '../state';
+import { $Transition, Options } from '../types';
+/**
+ * @public
+ */
+export interface AnimationControls {
+    /**
+     * Subscribes a component's animation controls to this.
+     *
+     * @param controls - The controls to subscribe
+     * @returns An unsubscribe function.
+     *
+     * @internal
+     */
+    subscribe: (state: MotionState) => () => void;
+    /**
+     * Starts an animation on all linked components.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * controls.start("variantLabel")
+     * controls.start({
+     *   x: 0,
+     *   transition: { duration: 1 }
+     * })
+     * ```
+     *
+     * @param definition - Properties or variant label to animate to
+     * @param transition - Optional `transtion` to apply to a variant
+     * @returns - A `Promise` that resolves when all animations have completed.
+     *
+     * @public
+     */
+    start: (definition: Options['animate'], transitionOverride?: $Transition) => Promise<any>;
+    /**
+     * Instantly set to a set of properties or a variant.
+     *
+     * ```jsx
+     * // With properties
+     * controls.set({ opacity: 0 })
+     *
+     * // With variants
+     * controls.set("hidden")
+     * ```
+     *
+     * @privateRemarks
+     * We could perform a similar trick to `.start` where this can be called before mount
+     * and we maintain a list of of pending actions that get applied on mount. But the
+     * expectation of `set` is that it happens synchronously and this would be difficult
+     * to do before any children have even attached themselves. It's also poor practise
+     * and we should discourage render-synchronous `.start` calls rather than lean into this.
+     *
+     * @public
+     */
+    set: (definition: Options['animate']) => void;
+    /**
+     * Stops animations on all linked components.
+     *
+     * ```jsx
+     * controls.stop()
+     * ```
+     *
+     * @public
+     */
+    stop: () => void;
+    mount: () => () => void;
+}

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

@@ -0,0 +1,2 @@
+import { AnimationControls } from './types';
+export declare function isAnimationControls(v?: unknown): v is AnimationControls;

package/dist/es/animation/utils.mjs

@@ -0,0 +1,6 @@
+function isAnimationControls(v) {
+  return v !== null && typeof v === "object" && typeof v.start === "function";
+}
+export {
+  isAnimationControls
+};

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

@@ -2,7 +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 { requestIdleCallback } from "./utils.mjs";
+import { frame } from "../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...{
     name: "AnimatePresence",
@@ -64,7 +64,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           if (!styles.has(state)) {
             state.willUpdate("done");
           } else {
-            requestIdleCallback(() => {
+            frame.render(() => {
               removePopStyle(state);
             });
           }

package/dist/{src → es}/components/index.d.ts

@@ -1,3 +1,3 @@
-export { Motion, motion } from './motion';
+export { Motion, motion, type MotionProps } from './motion';
 export * from './animate-presence';
 export * from './motion-config';

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

@@ -66,7 +66,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     onPanSessionStart: { type: Function },
     onPanStart: { type: Function },
     onPan: { type: Function },
-    onPanEnd: { type: Function }
+    onPanEnd: { type: Function },
+    focus: {},
+    onFocus: { type: Function },
+    onBlur: { type: Function }
   }, {
     as: "div",
     asChild: false,

package/dist/{src → es}/components/motion/NameSpace.d.ts

@@ -1,10 +1,10 @@
 import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes, IntrinsicElementAttributes } from 'vue';
 import { MotionProps } from './Motion';
 type ComponentProps<T> = T extends DefineComponent<ExtractPropTypes<infer Props>, any, any> ? ExtractPublicPropTypes<Props> : never;
-type MotionComponentProps = IntrinsicElementAttributes & {
+type MotionComponentProps = {
     create: <T extends DefineComponent>(T: any) => DefineComponent<MotionProps<any, unknown> & ComponentProps<T>>;
 };
-interface MotionNameSpace extends Record<keyof IntrinsicElementAttributes, DefineComponent<MotionProps<keyof IntrinsicElementAttributes, unknown> & MotionComponentProps[keyof IntrinsicElementAttributes]>> {
+interface MotionNameSpace extends Record<keyof IntrinsicElementAttributes, DefineComponent<MotionProps<keyof IntrinsicElementAttributes, unknown>>> {
     create: MotionComponentProps['create'];
 }
 export declare const motion: MotionNameSpace;

package/dist/es/constants/index.mjs

@@ -1,6 +1,5 @@
 const components = {
   motion: [
-    "motion",
     "Motion",
     "AnimatePresence",
     "LayoutGroup",

package/dist/es/features/animation/animation.d.ts

@@ -0,0 +1,13 @@
+import { Feature } from '../feature';
+import { MotionState } from '../../state';
+export declare class AnimationFeature extends Feature {
+    unmountControls?: () => void;
+    constructor(state: MotionState);
+    updateAnimationControlsSubscription(): void;
+    /**
+     * Subscribe any provided AnimationControls to the component's VisualElement
+     */
+    mount(): void;
+    update(): void;
+    unmount(): void;
+}

package/dist/es/features/animation/animation.mjs

@@ -0,0 +1,33 @@
+import { isAnimationControls } from "../../animation/utils.mjs";
+import { Feature } from "../feature.mjs";
+class AnimationFeature extends Feature {
+  constructor(state) {
+    super(state);
+  }
+  updateAnimationControlsSubscription() {
+    const { animate } = this.state.options;
+    if (isAnimationControls(animate)) {
+      this.unmountControls = animate.subscribe(this.state);
+    }
+  }
+  /**
+   * Subscribe any provided AnimationControls to the component's VisualElement
+   */
+  mount() {
+    this.updateAnimationControlsSubscription();
+  }
+  update() {
+    const { animate } = this.state.options;
+    const { animate: prevAnimate } = this.state.visualElement.prevProps || {};
+    if (animate !== prevAnimate) {
+      this.updateAnimationControlsSubscription();
+    }
+  }
+  unmount() {
+    var _a;
+    (_a = this.unmountControls) == null ? void 0 : _a.call(this);
+  }
+}
+export {
+  AnimationFeature
+};

package/dist/es/features/feature-manager.mjs

@@ -1,7 +1,9 @@
 import { SVGFeature } from "./svg.mjs";
 import { LayoutFeature } from "./layout/layout.mjs";
 import { PanGesture } from "./gestures/pan/index.mjs";
+import { AnimationFeature } from "./animation/animation.mjs";
 import { ProjectionFeature } from "./layout/projection.mjs";
+import { FocusGesture } from "./gestures/focus/index.mjs";
 import { HoverGesture } from "./gestures/hover/index.mjs";
 import { PressGesture } from "./gestures/press/index.mjs";
 import { InViewGesture } from "./gestures/in-view/index.mjs";
@@ -17,7 +19,9 @@ class FeatureManager {
       new LayoutFeature(state),
       new ProjectionFeature(state),
       new PanGesture(state),
-      new DragGesture(state)
+      new DragGesture(state),
+      new FocusGesture(state),
+      new AnimationFeature(state)
     ];
   }
   mount() {

package/dist/{src → es}/features/gestures/drag/types.d.ts

@@ -82,7 +82,7 @@ export interface DragHandlers {
      */
     onDragTransitionEnd?: () => void;
     /**
-     * If `dragConstraints` is set to a React ref, this callback will call with the measured drag constraints.
+     * If `dragConstraints` is set to a HTMLElement, this callback will call with the measured drag constraints.
      *
      * @public
      */

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

@@ -0,0 +1,7 @@
+import { Feature } from '../../feature';
+export declare class FocusGesture extends Feature {
+    private isActive;
+    onFocus(): void;
+    onBlur(): void;
+    mount(): void;
+}

package/dist/es/features/gestures/focus/index.mjs

@@ -0,0 +1,36 @@
+import { addDomEvent } from "../../../events/add-dom-event.mjs";
+import { Feature } from "../../feature.mjs";
+import { pipe } from "../../../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/utils/pipe.mjs";
+class FocusGesture extends Feature {
+  constructor() {
+    super(...arguments);
+    this.isActive = false;
+  }
+  onFocus() {
+    let isFocusVisible = false;
+    try {
+      isFocusVisible = this.state.element.matches(":focus-visible");
+    } catch (e) {
+      isFocusVisible = true;
+    }
+    if (!isFocusVisible)
+      return;
+    this.state.setActive("focus", true);
+    this.isActive = true;
+  }
+  onBlur() {
+    if (!this.isActive)
+      return;
+    this.state.setActive("focus", false);
+    this.isActive = false;
+  }
+  mount() {
+    this.unmount = pipe(
+      addDomEvent(this.state.element, "focus", () => this.onFocus()),
+      addDomEvent(this.state.element, "blur", () => this.onBlur())
+    );
+  }
+}
+export {
+  FocusGesture
+};

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

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

package/dist/{src → es}/features/index.d.ts

@@ -4,3 +4,4 @@ export * from './svg';
 export * from './layout/layout';
 export * from './gestures/pan';
 export * from './feature-manager';
+export * from './animation/animation';

package/dist/es/index.mjs

@@ -50,7 +50,8 @@ import { useMotionValueEvent } from "./value/use-motion-value-event.mjs";
 import { useSpring } from "./value/use-spring.mjs";
 import { useScroll } from "./value/use-scroll.mjs";
 import { useVelocity } from "./value/use-velocity.mjs";
-import { useAnimate } from "./animation/use-animate.mjs";
+import { useAnimate } from "./animation/hooks/use-animate.mjs";
+import { useAnimationControls } from "./animation/hooks/use-animation-controls.mjs";
 import { createContext } from "./utils/createContext.mjs";
 import { isMotionValue } from "./utils/motion-value.mjs";
 import { useInView } from "./utils/use-in-view.mjs";
@@ -120,6 +121,7 @@ export {
   time,
   transform,
   useAnimate,
+  useAnimationControls,
   useAnimationFrame,
   useCombineMotionValues,
   useComputed,

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

@@ -0,0 +1,19 @@
+import { $Transition, Options } from '../types';
+import { MotionState } from './motion-state';
+declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
+export type StateType = typeof STATE_TYPES[number];
+/**
+ * 核心动画更新函数,处理所有动画状态变化和执行
+ * @param controlActiveState - 需要更新的动画状态
+ * @param controlDelay - 动画延迟时间
+ * @param directAnimate - 直接动画目标值
+ * @param directTransition - 直接动画过渡配置
+ */
+export declare function animateUpdates(this: MotionState, { controlActiveState, controlDelay, directAnimate, directTransition, isFallback, }?: {
+    controlActiveState?: Partial<Record<string, boolean>>;
+    controlDelay?: number;
+    directAnimate?: Options['animate'];
+    directTransition?: $Transition;
+    isFallback?: boolean;
+}): any;
+export {};

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

@@ -0,0 +1,129 @@
+import { resolveVariant, getOptions, hasChanged } from "./utils.mjs";
+import { style } from "./style.mjs";
+import { transformResetValue } from "./transform.mjs";
+import { motionEvent } from "./event.mjs";
+import { isDef } from "@vueuse/core";
+import { isAnimationControls } from "../animation/utils.mjs";
+import { animate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
+import { noop } from "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/noop.mjs";
+import "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
+const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "focus", "exit"];
+function animateUpdates({
+  controlActiveState = void 0,
+  controlDelay = 0,
+  directAnimate,
+  directTransition,
+  isFallback = false
+} = {}) {
+  const prevTarget = this.target;
+  this.target = { ...this.baseTarget };
+  const animationOptions = {};
+  const transition = { ...this.options.transition };
+  if (directAnimate)
+    resolveDirectAnimation.call(this, directAnimate, directTransition, animationOptions);
+  else
+    resolveStateAnimation.call(this, controlActiveState, animationOptions);
+  const factories = createAnimationFactories.call(this, prevTarget, animationOptions, controlDelay);
+  const { getChildAnimations, childAnimations } = setupChildAnimations.call(this, transition, controlActiveState, isFallback);
+  return executeAnimations.call(this, factories, getChildAnimations, childAnimations, transition, controlActiveState);
+}
+function resolveDirectAnimation(directAnimate, directTransition, animationOptions) {
+  const variant = resolveVariant(directAnimate, this.options.variants, this.options.custom);
+  if (!variant)
+    return;
+  const transition = { ...this.options.transition, ...directTransition || variant.transition };
+  Object.entries(variant).forEach(([key, value]) => {
+    if (key === "transition")
+      return;
+    this.target[key] = value;
+    animationOptions[key] = getOptions(transition, key);
+  });
+}
+function resolveStateAnimation(controlActiveState, animationOptions) {
+  if (controlActiveState)
+    this.activeStates = { ...this.activeStates, ...controlActiveState };
+  STATE_TYPES.forEach((name) => {
+    if (!this.activeStates[name] || isAnimationControls(this.options[name]))
+      return;
+    const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];
+    const variant = resolveVariant(definition, this.options.variants, this.options.custom);
+    if (!variant)
+      return;
+    const transition = { ...this.options.transition, ...variant.transition };
+    Object.entries(variant).forEach(([key, value]) => {
+      if (key === "transition")
+        return;
+      this.target[key] = value;
+      animationOptions[key] = getOptions(transition, key);
+    });
+  });
+}
+function createAnimationFactories(prevTarget, animationOptions, controlDelay) {
+  const factories = [];
+  Object.keys(this.target).forEach((key) => {
+    var _a;
+    if (!hasChanged(prevTarget[key], this.target[key]))
+      return;
+    (_a = this.baseTarget)[key] ?? (_a[key] = style.get(this.element, key));
+    const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
+    const targetTransition = animationOptions[key];
+    factories.push(() => animate(
+      this.element,
+      { [key]: keyValue },
+      {
+        ...targetTransition,
+        delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
+      }
+    ));
+  });
+  return factories;
+}
+function setupChildAnimations(transition, controlActiveState, isFallback) {
+  var _a;
+  if (!((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) || controlActiveState)
+    return { getChildAnimations: () => Promise.resolve(), childAnimations: [] };
+  const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
+  const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
+  const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
+  const childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
+    const childDelay = delayChildren + generateStaggerDuration(index);
+    return child.state.animateUpdates({
+      controlActiveState: this.activeStates,
+      controlDelay: isFallback ? 0 : childDelay
+    });
+  }).filter(Boolean);
+  return {
+    getChildAnimations: () => Promise.all(childAnimations.map((animation) => animation())),
+    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;
+  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);
+  };
+  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()]);
+    finishAnimation(animationPromise);
+    return animationPromise;
+  };
+  return controlActiveState ? getAnimationPromise : getAnimationPromise();
+}
+export {
+  animateUpdates
+};

package/dist/{src → es}/state/motion-state.d.ts

@@ -1,7 +1,6 @@
 import { MotionStateContext, Options } from '../types';
 import { DOMKeyframesDefinition, VisualElement } from 'framer-motion';
-declare const STATE_TYPES: readonly ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
-type StateType = typeof STATE_TYPES[number];
+import { StateType, animateUpdates } from './animate-updates';
 export declare const mountedStates: WeakMap<Element, MotionState>;
 /**
  * Core class that manages animation state and orchestrates animations
@@ -33,9 +32,8 @@ export declare class MotionState {
     beforeUpdate(): void;
     update(options: Options, notAnimate?: boolean): void;
     setActive(name: StateType, isActive: boolean, isAnimate?: boolean): void;
-    animateUpdates(controlActiveState?: typeof this.activeStates, controlDelay?: number): () => Promise<any>;
+    animateUpdates: typeof animateUpdates;
     isMounted(): boolean;
     getOptions(): Options<any>;
     willUpdate(label: string): void;
 }
-export {};

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

@@ -1,18 +1,12 @@
 import { invariant } from "hey-listen";
 import { visualElementStore } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/render/store.mjs";
 import { isDef } from "@vueuse/core";
-import { resolveVariant, getOptions, hasChanged } from "./utils.mjs";
+import { resolveVariant } from "./utils.mjs";
 import { FeatureManager } from "../features/feature-manager.mjs";
-import { style } from "./style.mjs";
-import { transformResetValue } from "./transform.mjs";
-import { motionEvent } from "./event.mjs";
 import { createVisualElement } from "./create-visual-element.mjs";
 import { doneCallbacks } from "../components/presence.mjs";
+import { animateUpdates } from "./animate-updates.mjs";
 import { frame } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/frameloop/frame.mjs";
-import { noop } from "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/noop.mjs";
-import "../external/.pnpm/motion-utils@11.16.0/external/motion-utils/dist/es/errors.mjs";
-import { animate } from "../external/.pnpm/framer-motion@11.16.6/external/framer-motion/dist/es/animation/animate/index.mjs";
-const STATE_TYPES = ["initial", "animate", "inView", "hover", "press", "whileDrag", "exit"];
 const mountedStates = /* @__PURE__ */ new WeakMap();
 let id = 0;
 class MotionState {
@@ -27,6 +21,7 @@ class MotionState {
       animate: true
     };
     this._context = null;
+    this.animateUpdates = animateUpdates;
     this.id = `motion-state-${id++}`;
     this.options = options;
     this.parent = parent;
@@ -176,122 +171,10 @@ class MotionState {
       child.state.setActive(name, isActive, false);
     });
     if (isAnimate) {
-      this.animateUpdates();
-    }
-  }
-  // Core animation update logic
-  animateUpdates(controlActiveState = void 0, controlDelay = 0) {
-    var _a;
-    const prevTarget = this.target;
-    this.target = {
-      ...this.baseTarget
-    };
-    const animationOptions = {};
-    let transition;
-    if (controlActiveState) {
-      this.activeStates = { ...this.activeStates, ...controlActiveState };
-    }
-    for (const name of STATE_TYPES) {
-      if (!this.activeStates[name]) {
-        continue;
-      }
-      const definition = isDef(this.options[name]) ? this.options[name] : this.context[name];
-      const variant = resolveVariant(
-        definition,
-        this.options.variants,
-        this.options.custom
-      );
-      transition = Object.assign({}, this.options.transition, variant == null ? void 0 : variant.transition);
-      if (!variant)
-        continue;
-      const allTarget = { ...variant };
-      for (const key in allTarget) {
-        if (key === "transition")
-          continue;
-        this.target[key] = variant[key];
-        animationOptions[key] = getOptions(
-          transition,
-          key
-        );
-      }
-    }
-    const allTargetKeys = /* @__PURE__ */ new Set([
-      ...Object.keys(this.target)
-    ]);
-    const animationFactories = [];
-    allTargetKeys.forEach((key) => {
-      var _a2;
-      if (hasChanged(prevTarget[key], this.target[key])) {
-        (_a2 = this.baseTarget)[key] ?? (_a2[key] = style.get(this.element, key));
-        const keyValue = this.target[key] === "none" ? transformResetValue[key] : this.target[key];
-        const targetTransition = animationOptions[key];
-        animationFactories.push(
-          () => {
-            return animate(
-              this.element,
-              {
-                [key]: keyValue
-              },
-              {
-                ...targetTransition,
-                delay: ((targetTransition == null ? void 0 : targetTransition.delay) || 0) + controlDelay
-              }
-            );
-          }
-        );
-      }
-    });
-    let getChildAnimations = () => Promise.resolve();
-    let childAnimations = [];
-    if (((_a = this.visualElement.variantChildren) == null ? void 0 : _a.size) && !controlActiveState) {
-      const { staggerChildren = 0, staggerDirection = 1, delayChildren = 0 } = transition || {};
-      const maxStaggerDuration = (this.visualElement.variantChildren.size - 1) * staggerChildren;
-      const generateStaggerDuration = staggerDirection === 1 ? (i = 0) => i * staggerChildren : (i = 0) => maxStaggerDuration - i * staggerChildren;
-      childAnimations = Array.from(this.visualElement.variantChildren).map((child, index) => {
-        const childDelay = delayChildren + generateStaggerDuration(index);
-        return child.state.animateUpdates(this.activeStates, childDelay);
-      }).filter(Boolean);
-      getChildAnimations = () => Promise.all(childAnimations.map((animation) => animation()));
-    }
-    let animations;
-    const getAnimation = () => {
-      animations = animationFactories.map((factory) => factory()).filter(Boolean);
-      return Promise.all(animations);
-    };
-    const { when } = transition;
-    let animationPromise;
-    const isExit = this.activeStates.exit;
-    const animationTarget = { ...this.target };
-    const element = this.element;
-    function finishAnimation() {
-      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);
-    }
-    function getAnimationPromise() {
-      if (when) {
-        const [first, last] = when === "beforeChildren" ? [getAnimation, getChildAnimations] : [getChildAnimations, getAnimation];
-        animationPromise = first().then(() => last());
-        finishAnimation();
-        return animationPromise;
-      } else {
-        animationPromise = Promise.all([getAnimation(), getChildAnimations()]);
-        finishAnimation();
-        return animationPromise;
-      }
-    }
-    if (controlActiveState) {
-      return getAnimationPromise;
+      this.animateUpdates({
+        isFallback: !isActive
+      });
     }
-    getAnimationPromise();
   }
   isMounted() {
     return Boolean(this.element);

package/dist/es/state/style.mjs

@@ -1,5 +1,5 @@
-import { isCssVar, isNumber } from "./utils.mjs";
-import { transformDefinitions, isTransform, transformAlias, buildTransformTemplate } from "./transform.mjs";
+import { isNumber, isCssVar } from "./utils.mjs";
+import { isTransform, transformAlias, transformDefinitions, buildTransformTemplate } from "./transform.mjs";
 import { isMotionValue } from "../utils/motion-value.mjs";
 const style = {
   get: (element, name) => {

package/dist/{src → es}/state/utils.d.ts

@@ -1,7 +1,7 @@
 import { $Transition, Options } from '../types';
 import { Variant } from 'framer-motion';
 import { IntrinsicElementAttributes } from 'vue';
-export declare function resolveVariant(definition?: Options['initial'], variants?: Options['variants'], custom?: Options['custom']): Variant | undefined;
+export declare function resolveVariant(definition?: Options['animate'], variants?: Options['variants'], custom?: Options['custom']): Variant | undefined;
 export declare function hasChanged(a: any, b: any): boolean;
 export declare function shallowCompare(next: any[], prev: any[]): boolean;
 export declare function addUniqueItem<T>(array: T[], item: T): void;