/
types.ts
71 lines (68 loc) · 2.4 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/**
* @public
*/
export interface LayoutProps {
/**
* If `true`, this component will automatically animate to its new position when
* its layout changes.
*
* ```jsx
* <motion.div layout />
* ```
*
* This will perform a layout animation using performant transforms. Part of this technique
* involved animating an element's scale. This can introduce visual distortions on children,
* `boxShadow` and `borderRadius`.
*
* To correct distortion on immediate children, add `layout` to those too.
*
* `boxShadow` and `borderRadius` will automatically be corrected if they are already being
* animated on this component. Otherwise, set them directly via the `initial` prop.
*
* If `layout` is set to `"position"`, the size of the component will change instantly and
* only its position will animate. If `layout` is set to `"size"`, the position of the
* component will change instantly but its size will animate.
*
* @public
*/
layout?: boolean | "position" | "size"
/**
* Enable shared layout transitions between components for children of `AnimateSharedLayout`.
*
* When a component with a layoutId is removed from the React tree, and then
* added elsewhere, it will visually animate from the previous component's bounding box
* and its latest animated values.
*
* ```jsx
* <AnimateSharedLayout>
* {items.map(item => (
* <motion.li layout>
* {item.name}
* {item.isSelected && <motion.div layoutId="underline" />}
* </motion.li>
* ))}
* </AnimateSharedLayout>
* ```
*
* If the previous component remains in the tree it will either get hidden immediately or,
* if `type="crossfade"` is set on `AnimateSharedLayout`, it will crossfade to the new component.
*
* @public
*/
layoutId?: string
/**
* This enables a component's transform to be reset during layout
* measurements. This is intended to be used independently of the
* layout prop, for instance if a parent component's transform is
* interfering with the measurement of a child.
*
* @internal
*/
_layoutResetTransform?: boolean
/**
* A callback that will fire when a layout animation on this component completes.
*
* @public
*/
onLayoutAnimationComplete?(): void
}