UNPKG

motion-v

Version:

<p align="center"> <img width="100" height="100" alt="Motion logo" src="https://user-images.githubusercontent.com/7850794/164965523-3eced4c4-6020-467e-acde-f11b7900ad62.png" /> </p> <h1 align="center">Motion for Vue</h1>

81 lines (80 loc) 3.32 kB
import { DOMKeyframesDefinition, ResolvedValues, Target, TargetAndTransition } from 'framer-motion'; import { MotionValue, TransformProperties, animate } from 'framer-motion/dom'; import { LayoutOptions } from '../features/layout/types'; import { DragProps } from '../features/gestures/drag/types'; import { PressProps } from '../features/gestures/press/types'; import { HoverProps } from '../features/gestures/hover/types'; import { InViewProps } from '../features/gestures/in-view/types'; import { LayoutGroupState } from '../components/context'; import { PanProps } from '../features/gestures/pan/types'; import { MotionConfigState } from '../components/motion-config/types'; import { $Transition } from './framer-motion'; import { FocusProps } from '../features/gestures/focus/types'; import { AnimationControls } from '../animation/types'; import { AsTag } from './common'; type AnimationPlaybackControls = ReturnType<typeof animate>; export type TargetResolver = (custom: any, current: Target, velocity: Target) => TargetAndTransition | string; export interface Variant extends DOMKeyframesDefinition { transition?: $Transition; attrX?: DOMKeyframesDefinition['x']; attrY?: DOMKeyframesDefinition['y']; attrScale?: DOMKeyframesDefinition['scale']; } /** * 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; bottom: number; left: number; } export interface DragOptions { constraints?: false | Partial<BoundingBox>; dragSnapToOrigin?: boolean; } type TransformPropertiesWithoutTransition = Omit<TransformProperties, 'transition'>; export type MotionStyle = Partial<{ [K in keyof Omit<Variant & TransformPropertiesWithoutTransition, 'attrX' | 'attrY' | 'attrScale'>]: string | number | undefined | MotionValue; }>; export interface Options<T = any> extends LayoutOptions, PressProps, HoverProps, InViewProps, DragProps, PanProps, FocusProps { custom?: T; as?: AsTag; initial?: VariantLabels | Variant | boolean; animate?: VariantLabels | Variant | AnimationControls; exit?: VariantLabels | Variant; variants?: { [k: string]: Variant | ((custom: T) => Variant); }; inherit?: boolean; style?: MotionStyle; transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string; transition?: $Transition & { layout?: $Transition; }; layoutGroup?: LayoutGroupState; motionConfig?: MotionConfigState; onAnimationComplete?: (definition: Options['animate']) => void; onUpdate?: (latest: ResolvedValues) => void; onAnimationStart?: (definition: Options['animate']) => void; } export interface MotionStateContext { initial?: VariantLabels | boolean; animate?: VariantLabels; inView?: VariantLabels; hover?: VariantLabels; press?: VariantLabels; exit?: VariantLabels; } export type AnimationFactory = () => AnimationPlaybackControls | undefined; export interface CssPropertyDefinition { syntax: `<${string}>`; initialValue: string | number; toDefaultUnit: (v: number) => string | number; } export type CssPropertyDefinitionMap = { [key: string]: CssPropertyDefinition; }; export {};