@progress/kendo-react-animation 12.0.2-develop.1 → 12.0.2-develop.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.d.mts +72 -45
- package/index.d.ts +72 -45
- package/package.json +2 -2
package/index.d.mts
CHANGED
|
@@ -50,7 +50,7 @@ export declare interface AnimationChildHandle {
|
|
|
50
50
|
*/
|
|
51
51
|
export declare interface AnimationChildProps extends AnimationInterface {
|
|
52
52
|
/**
|
|
53
|
-
* Controlled by `TransitionGroup` if present. Otherwise, sets the state of the enter or exit
|
|
53
|
+
* Controlled by `TransitionGroup` if present. Otherwise, sets the state of the enter or exit animations.
|
|
54
54
|
*/
|
|
55
55
|
in?: boolean;
|
|
56
56
|
/**
|
|
@@ -68,36 +68,36 @@ export declare interface AnimationChildProps extends AnimationInterface {
|
|
|
68
68
|
*/
|
|
69
69
|
className?: string;
|
|
70
70
|
/**
|
|
71
|
-
* Specifies the base class name for the transition. This class
|
|
72
|
-
*
|
|
71
|
+
* Specifies the base class name for the transition. This class generates
|
|
72
|
+
* the `appear`, `enter`, and `exit` transition classes.
|
|
73
73
|
*
|
|
74
74
|
* @example
|
|
75
75
|
* <AnimationChild transitionName="fade" />
|
|
76
76
|
*/
|
|
77
77
|
transitionName: string;
|
|
78
78
|
/**
|
|
79
|
-
* Specifies the style
|
|
79
|
+
* Specifies the style that applies when the Animation reaches its entering state.
|
|
80
80
|
*
|
|
81
81
|
* @example
|
|
82
82
|
* <AnimationChild animationEnteringStyle={{ opacity: 0.5 }} />
|
|
83
83
|
*/
|
|
84
84
|
animationEnteringStyle?: any;
|
|
85
85
|
/**
|
|
86
|
-
* Inline styles
|
|
86
|
+
* Inline styles that apply when the Animation has entered.
|
|
87
87
|
*
|
|
88
88
|
* @example
|
|
89
89
|
* <AnimationChild animationEnteredStyle={{ opacity: 1 }} />
|
|
90
90
|
*/
|
|
91
91
|
animationEnteredStyle?: any;
|
|
92
92
|
/**
|
|
93
|
-
* Specifies the style
|
|
93
|
+
* Specifies the style that applies when the Animation reaches its exiting state.
|
|
94
94
|
*
|
|
95
95
|
* @example
|
|
96
96
|
* <AnimationChild animationExitingStyle={{ opacity: 0.5 }} />
|
|
97
97
|
*/
|
|
98
98
|
animationExitingStyle?: any;
|
|
99
99
|
/**
|
|
100
|
-
* Inline styles
|
|
100
|
+
* Inline styles that apply when the Animation has exited.
|
|
101
101
|
*
|
|
102
102
|
* @example
|
|
103
103
|
* <AnimationChild animationExitedStyle={{ opacity: 0 }} />
|
|
@@ -105,7 +105,7 @@ export declare interface AnimationChildProps extends AnimationInterface {
|
|
|
105
105
|
animationExitedStyle?: any;
|
|
106
106
|
/**
|
|
107
107
|
* Provides unstyled options for the Animation. Accepts an object
|
|
108
|
-
*
|
|
108
|
+
* that implements the `AnimationsClassStructure` interface.
|
|
109
109
|
*
|
|
110
110
|
* @example
|
|
111
111
|
* <AnimationChild unstyled={{ appear: "custom-appear-class" }} />
|
|
@@ -138,7 +138,7 @@ declare interface AnimationEventArguments {
|
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
/**
|
|
141
|
-
* Inherited by all
|
|
141
|
+
* Inherited by all animations. Represents the properties you can set to an Animation.
|
|
142
142
|
*/
|
|
143
143
|
declare interface AnimationInterface {
|
|
144
144
|
/**
|
|
@@ -146,35 +146,35 @@ declare interface AnimationInterface {
|
|
|
146
146
|
*/
|
|
147
147
|
children?: React.ReactNode;
|
|
148
148
|
/**
|
|
149
|
-
* Specifies the CSS class names
|
|
149
|
+
* Specifies the CSS class names that are set to each of the animated children elements.
|
|
150
150
|
*/
|
|
151
151
|
componentChildClassName?: string;
|
|
152
152
|
/**
|
|
153
|
-
* Specifies the styles
|
|
153
|
+
* Specifies the styles that are set to each of the animated children elements.
|
|
154
154
|
*/
|
|
155
155
|
componentChildStyle?: any;
|
|
156
156
|
/**
|
|
157
|
-
* Called when a component
|
|
157
|
+
* Called when you add a component to an existing Animation component and the Animation has not started yet ([more information and example]({% slug lifecyclehooks_animation %}#toc-adding-child-elements)).
|
|
158
158
|
*/
|
|
159
159
|
onEnter?: (event: AnimationEventArguments) => void;
|
|
160
160
|
/**
|
|
161
|
-
* Called when a component
|
|
161
|
+
* Called when you add a component to an existing Animation component and the Animation is now happening ([more information and example]({% slug lifecyclehooks_animation %}#toc-adding-child-elements)).
|
|
162
162
|
*/
|
|
163
163
|
onEntering?: (event: AnimationEventArguments) => void;
|
|
164
164
|
/**
|
|
165
|
-
* Called when a component
|
|
165
|
+
* Called when you add a component to an existing Animation component and the Animation is now finished ([more information and example]({% slug lifecyclehooks_animation %}#toc-adding-child-elements)).
|
|
166
166
|
*/
|
|
167
167
|
onEntered?: (event: AnimationEventArguments) => void;
|
|
168
168
|
/**
|
|
169
|
-
* An event
|
|
169
|
+
* An event called after the Animation has reached its exit state ([more information and example]({% slug lifecyclehooks_animation %}#toc-removing-child-elements)).
|
|
170
170
|
*/
|
|
171
171
|
onExit?: (event: AnimationEventArguments) => void;
|
|
172
172
|
/**
|
|
173
|
-
* An event
|
|
173
|
+
* An event called after the Animation has reached its exiting state ([more information and example]({% slug lifecyclehooks_animation %}#toc-removing-child-elements)).
|
|
174
174
|
*/
|
|
175
175
|
onExiting?: (event: AnimationEventArguments) => void;
|
|
176
176
|
/**
|
|
177
|
-
* An event
|
|
177
|
+
* An event called after the Animation has reached its exited state ([more information and example]({% slug lifecyclehooks_animation %}#toc-removing-child-elements)).
|
|
178
178
|
*/
|
|
179
179
|
onExited?: (event: AnimationEventArguments) => void;
|
|
180
180
|
/**
|
|
@@ -183,31 +183,45 @@ declare interface AnimationInterface {
|
|
|
183
183
|
*/
|
|
184
184
|
onAfterExited?: (event: AnimationEventArguments) => void;
|
|
185
185
|
/**
|
|
186
|
-
* Defines whether a transition should happen on the first mount.
|
|
186
|
+
* Defines whether a transition should happen on the first mount.
|
|
187
|
+
*
|
|
188
|
+
* @default false
|
|
187
189
|
*/
|
|
188
190
|
appear?: boolean;
|
|
189
191
|
/**
|
|
190
|
-
* Specifies whether to animate the entering (showing) element ([see example]({% slug disabledstate_animation %})).
|
|
192
|
+
* Specifies whether to animate the entering (showing) element ([see example]({% slug disabledstate_animation %})).
|
|
193
|
+
*
|
|
194
|
+
* @default true
|
|
191
195
|
*/
|
|
192
196
|
enter?: boolean;
|
|
193
197
|
/**
|
|
194
|
-
* Specifies whether to animate a leaving (disappearing) element ([see example]({% slug disabledstate_animation %})).
|
|
198
|
+
* Specifies whether to animate a leaving (disappearing) element ([see example]({% slug disabledstate_animation %})).
|
|
199
|
+
*
|
|
200
|
+
* @default true
|
|
195
201
|
*/
|
|
196
202
|
exit?: boolean;
|
|
197
203
|
/**
|
|
198
|
-
* Specifies the duration of the transition for the entering (`animation in`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated.
|
|
204
|
+
* Specifies the duration of the transition for the entering (`animation in`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated.
|
|
205
|
+
*
|
|
206
|
+
* @default 300
|
|
199
207
|
*/
|
|
200
208
|
transitionEnterDuration?: number;
|
|
201
209
|
/**
|
|
202
|
-
* Specifies the duration of the transition for the exiting (`animation out`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated.
|
|
210
|
+
* Specifies the duration of the transition for the exiting (`animation out`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated.
|
|
211
|
+
*
|
|
212
|
+
* @default 300
|
|
203
213
|
*/
|
|
204
214
|
transitionExitDuration?: number;
|
|
205
215
|
/**
|
|
206
|
-
* Specifies if the Animation
|
|
216
|
+
* Specifies if the Animation uses lazy-mounting on the first `in={true}`.
|
|
217
|
+
*
|
|
218
|
+
* @default false
|
|
207
219
|
*/
|
|
208
220
|
mountOnEnter?: boolean;
|
|
209
221
|
/**
|
|
210
|
-
* Specifies if the Animation
|
|
222
|
+
* Specifies if the Animation unmounts after it reaches its exited state.
|
|
223
|
+
*
|
|
224
|
+
* @default false
|
|
211
225
|
*/
|
|
212
226
|
unmountOnExit?: boolean;
|
|
213
227
|
}
|
|
@@ -231,8 +245,9 @@ export declare interface AnimationProps extends AnimationInterface {
|
|
|
231
245
|
*/
|
|
232
246
|
className?: string;
|
|
233
247
|
/**
|
|
234
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
248
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
235
249
|
*
|
|
250
|
+
* @default "div"
|
|
236
251
|
* @example
|
|
237
252
|
* <Animation component="main" />
|
|
238
253
|
*/
|
|
@@ -325,8 +340,7 @@ export declare const Expand: {
|
|
|
325
340
|
export declare type ExpandDirection = 'horizontal' | 'vertical';
|
|
326
341
|
|
|
327
342
|
/**
|
|
328
|
-
*
|
|
329
|
-
*
|
|
343
|
+
* Represents the props of the [KendoReact Expand Animation component]({% slug animationtypes_animation %}#toc-expand).
|
|
330
344
|
*/
|
|
331
345
|
export declare interface ExpandProps extends AnimationInterface {
|
|
332
346
|
/**
|
|
@@ -344,15 +358,17 @@ export declare interface ExpandProps extends AnimationInterface {
|
|
|
344
358
|
*/
|
|
345
359
|
className?: string;
|
|
346
360
|
/**
|
|
347
|
-
* Specifies the direction of the Expand Animation.
|
|
361
|
+
* Specifies the direction of the Expand Animation.
|
|
348
362
|
*
|
|
363
|
+
* @default "vertical"
|
|
349
364
|
* @example
|
|
350
365
|
* <Expand direction="horizontal" />
|
|
351
366
|
*/
|
|
352
367
|
direction?: ExpandDirection;
|
|
353
368
|
/**
|
|
354
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
369
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
355
370
|
*
|
|
371
|
+
* @default "div"
|
|
356
372
|
* @example
|
|
357
373
|
* <Expand component="nav" />
|
|
358
374
|
*/
|
|
@@ -386,7 +402,7 @@ export declare const Fade: {
|
|
|
386
402
|
};
|
|
387
403
|
|
|
388
404
|
/**
|
|
389
|
-
*
|
|
405
|
+
* Represents the props of the [KendoReact Fade Animation component]({% slug animationtypes_animation %}#toc-fade).
|
|
390
406
|
*/
|
|
391
407
|
export declare interface FadeProps extends AnimationInterface {
|
|
392
408
|
/**
|
|
@@ -404,8 +420,9 @@ export declare interface FadeProps extends AnimationInterface {
|
|
|
404
420
|
*/
|
|
405
421
|
className?: string;
|
|
406
422
|
/**
|
|
407
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
423
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
408
424
|
*
|
|
425
|
+
* @default "div"
|
|
409
426
|
* @example
|
|
410
427
|
* <Fade component="header" />
|
|
411
428
|
*/
|
|
@@ -452,7 +469,7 @@ export declare const Push: {
|
|
|
452
469
|
export declare type PushDirection = 'up' | 'down' | 'left' | 'right';
|
|
453
470
|
|
|
454
471
|
/**
|
|
455
|
-
*
|
|
472
|
+
* Represents the props of the [KendoReact Push Animation component]({% slug animationtypes_animation %}#toc-push).
|
|
456
473
|
*/
|
|
457
474
|
export declare interface PushProps extends AnimationInterface {
|
|
458
475
|
/**
|
|
@@ -470,15 +487,17 @@ export declare interface PushProps extends AnimationInterface {
|
|
|
470
487
|
*/
|
|
471
488
|
className?: string;
|
|
472
489
|
/**
|
|
473
|
-
* Specifies the direction of the Push Animation.
|
|
490
|
+
* Specifies the direction of the Push Animation.
|
|
474
491
|
*
|
|
492
|
+
* @default "right"
|
|
475
493
|
* @example
|
|
476
494
|
* <Push direction="up" />
|
|
477
495
|
*/
|
|
478
496
|
direction?: PushDirection;
|
|
479
497
|
/**
|
|
480
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
498
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
481
499
|
*
|
|
500
|
+
* @default "div"
|
|
482
501
|
* @example
|
|
483
502
|
* <Push component="footer" />
|
|
484
503
|
*/
|
|
@@ -498,8 +517,9 @@ export declare interface PushProps extends AnimationInterface {
|
|
|
498
517
|
*/
|
|
499
518
|
style?: any;
|
|
500
519
|
/**
|
|
501
|
-
* Determines whether child elements will stack on top of each other during the animation.
|
|
520
|
+
* Determines whether child elements will stack on top of each other during the animation.
|
|
502
521
|
*
|
|
522
|
+
* @default false
|
|
503
523
|
* @example
|
|
504
524
|
* <Push stackChildren={true} />
|
|
505
525
|
*/
|
|
@@ -529,7 +549,7 @@ export declare const Reveal: {
|
|
|
529
549
|
export declare type RevealDirection = 'horizontal' | 'vertical';
|
|
530
550
|
|
|
531
551
|
/**
|
|
532
|
-
*
|
|
552
|
+
* Represents the props of the [KendoReact Reveal Animation component]({% slug animationtypes_animation %}#toc-reveal).
|
|
533
553
|
*/
|
|
534
554
|
export declare interface RevealProps extends AnimationInterface {
|
|
535
555
|
/**
|
|
@@ -547,15 +567,17 @@ export declare interface RevealProps extends AnimationInterface {
|
|
|
547
567
|
*/
|
|
548
568
|
className?: string;
|
|
549
569
|
/**
|
|
550
|
-
* Specifies the direction of the Reveal Animation.
|
|
570
|
+
* Specifies the direction of the Reveal Animation.
|
|
551
571
|
*
|
|
572
|
+
* @default "vertical"
|
|
552
573
|
* @example
|
|
553
574
|
* <Reveal direction="horizontal" />
|
|
554
575
|
*/
|
|
555
576
|
direction?: RevealDirection;
|
|
556
577
|
/**
|
|
557
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
578
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
558
579
|
*
|
|
580
|
+
* @default "div"
|
|
559
581
|
* @example
|
|
560
582
|
* <Reveal component="aside" />
|
|
561
583
|
*/
|
|
@@ -606,7 +628,7 @@ export declare const Slide: {
|
|
|
606
628
|
export declare type SlideDirection = 'up' | 'down' | 'left' | 'right';
|
|
607
629
|
|
|
608
630
|
/**
|
|
609
|
-
*
|
|
631
|
+
* Represents the props of the [KendoReact Slide Animation component]({% slug animationtypes_animation %}#toc-slide).
|
|
610
632
|
*/
|
|
611
633
|
export declare interface SlideProps extends AnimationInterface {
|
|
612
634
|
/**
|
|
@@ -624,15 +646,17 @@ export declare interface SlideProps extends AnimationInterface {
|
|
|
624
646
|
*/
|
|
625
647
|
className?: string;
|
|
626
648
|
/**
|
|
627
|
-
* Specifies the direction of the Slide Animation.
|
|
649
|
+
* Specifies the direction of the Slide Animation.
|
|
628
650
|
*
|
|
651
|
+
* @default "down"
|
|
629
652
|
* @example
|
|
630
653
|
* <Slide direction="left" />
|
|
631
654
|
*/
|
|
632
655
|
direction?: SlideDirection;
|
|
633
656
|
/**
|
|
634
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
657
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
635
658
|
*
|
|
659
|
+
* @default "div"
|
|
636
660
|
* @example
|
|
637
661
|
* <Slide component="article" />
|
|
638
662
|
*/
|
|
@@ -680,7 +704,7 @@ export declare const Zoom: {
|
|
|
680
704
|
export declare type ZoomDirection = 'in' | 'out';
|
|
681
705
|
|
|
682
706
|
/**
|
|
683
|
-
*
|
|
707
|
+
* Represents the props of the [KendoReact Zoom Animation component]({% slug animationtypes_animation %}#toc-zoom).
|
|
684
708
|
*/
|
|
685
709
|
export declare interface ZoomProps extends AnimationInterface {
|
|
686
710
|
/**
|
|
@@ -698,15 +722,17 @@ export declare interface ZoomProps extends AnimationInterface {
|
|
|
698
722
|
*/
|
|
699
723
|
className?: string;
|
|
700
724
|
/**
|
|
701
|
-
* Specifies the direction of the Zoom Animation.
|
|
725
|
+
* Specifies the direction of the Zoom Animation.
|
|
702
726
|
*
|
|
727
|
+
* @default "out"
|
|
703
728
|
* @example
|
|
704
729
|
* <Zoom direction="in" />
|
|
705
730
|
*/
|
|
706
731
|
direction?: ZoomDirection;
|
|
707
732
|
/**
|
|
708
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
733
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
709
734
|
*
|
|
735
|
+
* @default "div"
|
|
710
736
|
* @example
|
|
711
737
|
* <Zoom component="section" />
|
|
712
738
|
*/
|
|
@@ -726,8 +752,9 @@ export declare interface ZoomProps extends AnimationInterface {
|
|
|
726
752
|
*/
|
|
727
753
|
style?: any;
|
|
728
754
|
/**
|
|
729
|
-
* Determines whether child elements will stack on top of each other during the animation.
|
|
755
|
+
* Determines whether child elements will stack on top of each other during the animation.
|
|
730
756
|
*
|
|
757
|
+
* @default false
|
|
731
758
|
* @example
|
|
732
759
|
* <Zoom stackChildren={true} />
|
|
733
760
|
*/
|
package/index.d.ts
CHANGED
|
@@ -50,7 +50,7 @@ export declare interface AnimationChildHandle {
|
|
|
50
50
|
*/
|
|
51
51
|
export declare interface AnimationChildProps extends AnimationInterface {
|
|
52
52
|
/**
|
|
53
|
-
* Controlled by `TransitionGroup` if present. Otherwise, sets the state of the enter or exit
|
|
53
|
+
* Controlled by `TransitionGroup` if present. Otherwise, sets the state of the enter or exit animations.
|
|
54
54
|
*/
|
|
55
55
|
in?: boolean;
|
|
56
56
|
/**
|
|
@@ -68,36 +68,36 @@ export declare interface AnimationChildProps extends AnimationInterface {
|
|
|
68
68
|
*/
|
|
69
69
|
className?: string;
|
|
70
70
|
/**
|
|
71
|
-
* Specifies the base class name for the transition. This class
|
|
72
|
-
*
|
|
71
|
+
* Specifies the base class name for the transition. This class generates
|
|
72
|
+
* the `appear`, `enter`, and `exit` transition classes.
|
|
73
73
|
*
|
|
74
74
|
* @example
|
|
75
75
|
* <AnimationChild transitionName="fade" />
|
|
76
76
|
*/
|
|
77
77
|
transitionName: string;
|
|
78
78
|
/**
|
|
79
|
-
* Specifies the style
|
|
79
|
+
* Specifies the style that applies when the Animation reaches its entering state.
|
|
80
80
|
*
|
|
81
81
|
* @example
|
|
82
82
|
* <AnimationChild animationEnteringStyle={{ opacity: 0.5 }} />
|
|
83
83
|
*/
|
|
84
84
|
animationEnteringStyle?: any;
|
|
85
85
|
/**
|
|
86
|
-
* Inline styles
|
|
86
|
+
* Inline styles that apply when the Animation has entered.
|
|
87
87
|
*
|
|
88
88
|
* @example
|
|
89
89
|
* <AnimationChild animationEnteredStyle={{ opacity: 1 }} />
|
|
90
90
|
*/
|
|
91
91
|
animationEnteredStyle?: any;
|
|
92
92
|
/**
|
|
93
|
-
* Specifies the style
|
|
93
|
+
* Specifies the style that applies when the Animation reaches its exiting state.
|
|
94
94
|
*
|
|
95
95
|
* @example
|
|
96
96
|
* <AnimationChild animationExitingStyle={{ opacity: 0.5 }} />
|
|
97
97
|
*/
|
|
98
98
|
animationExitingStyle?: any;
|
|
99
99
|
/**
|
|
100
|
-
* Inline styles
|
|
100
|
+
* Inline styles that apply when the Animation has exited.
|
|
101
101
|
*
|
|
102
102
|
* @example
|
|
103
103
|
* <AnimationChild animationExitedStyle={{ opacity: 0 }} />
|
|
@@ -105,7 +105,7 @@ export declare interface AnimationChildProps extends AnimationInterface {
|
|
|
105
105
|
animationExitedStyle?: any;
|
|
106
106
|
/**
|
|
107
107
|
* Provides unstyled options for the Animation. Accepts an object
|
|
108
|
-
*
|
|
108
|
+
* that implements the `AnimationsClassStructure` interface.
|
|
109
109
|
*
|
|
110
110
|
* @example
|
|
111
111
|
* <AnimationChild unstyled={{ appear: "custom-appear-class" }} />
|
|
@@ -138,7 +138,7 @@ declare interface AnimationEventArguments {
|
|
|
138
138
|
}
|
|
139
139
|
|
|
140
140
|
/**
|
|
141
|
-
* Inherited by all
|
|
141
|
+
* Inherited by all animations. Represents the properties you can set to an Animation.
|
|
142
142
|
*/
|
|
143
143
|
declare interface AnimationInterface {
|
|
144
144
|
/**
|
|
@@ -146,35 +146,35 @@ declare interface AnimationInterface {
|
|
|
146
146
|
*/
|
|
147
147
|
children?: React.ReactNode;
|
|
148
148
|
/**
|
|
149
|
-
* Specifies the CSS class names
|
|
149
|
+
* Specifies the CSS class names that are set to each of the animated children elements.
|
|
150
150
|
*/
|
|
151
151
|
componentChildClassName?: string;
|
|
152
152
|
/**
|
|
153
|
-
* Specifies the styles
|
|
153
|
+
* Specifies the styles that are set to each of the animated children elements.
|
|
154
154
|
*/
|
|
155
155
|
componentChildStyle?: any;
|
|
156
156
|
/**
|
|
157
|
-
* Called when a component
|
|
157
|
+
* Called when you add a component to an existing Animation component and the Animation has not started yet ([more information and example]({% slug lifecyclehooks_animation %}#toc-adding-child-elements)).
|
|
158
158
|
*/
|
|
159
159
|
onEnter?: (event: AnimationEventArguments) => void;
|
|
160
160
|
/**
|
|
161
|
-
* Called when a component
|
|
161
|
+
* Called when you add a component to an existing Animation component and the Animation is now happening ([more information and example]({% slug lifecyclehooks_animation %}#toc-adding-child-elements)).
|
|
162
162
|
*/
|
|
163
163
|
onEntering?: (event: AnimationEventArguments) => void;
|
|
164
164
|
/**
|
|
165
|
-
* Called when a component
|
|
165
|
+
* Called when you add a component to an existing Animation component and the Animation is now finished ([more information and example]({% slug lifecyclehooks_animation %}#toc-adding-child-elements)).
|
|
166
166
|
*/
|
|
167
167
|
onEntered?: (event: AnimationEventArguments) => void;
|
|
168
168
|
/**
|
|
169
|
-
* An event
|
|
169
|
+
* An event called after the Animation has reached its exit state ([more information and example]({% slug lifecyclehooks_animation %}#toc-removing-child-elements)).
|
|
170
170
|
*/
|
|
171
171
|
onExit?: (event: AnimationEventArguments) => void;
|
|
172
172
|
/**
|
|
173
|
-
* An event
|
|
173
|
+
* An event called after the Animation has reached its exiting state ([more information and example]({% slug lifecyclehooks_animation %}#toc-removing-child-elements)).
|
|
174
174
|
*/
|
|
175
175
|
onExiting?: (event: AnimationEventArguments) => void;
|
|
176
176
|
/**
|
|
177
|
-
* An event
|
|
177
|
+
* An event called after the Animation has reached its exited state ([more information and example]({% slug lifecyclehooks_animation %}#toc-removing-child-elements)).
|
|
178
178
|
*/
|
|
179
179
|
onExited?: (event: AnimationEventArguments) => void;
|
|
180
180
|
/**
|
|
@@ -183,31 +183,45 @@ declare interface AnimationInterface {
|
|
|
183
183
|
*/
|
|
184
184
|
onAfterExited?: (event: AnimationEventArguments) => void;
|
|
185
185
|
/**
|
|
186
|
-
* Defines whether a transition should happen on the first mount.
|
|
186
|
+
* Defines whether a transition should happen on the first mount.
|
|
187
|
+
*
|
|
188
|
+
* @default false
|
|
187
189
|
*/
|
|
188
190
|
appear?: boolean;
|
|
189
191
|
/**
|
|
190
|
-
* Specifies whether to animate the entering (showing) element ([see example]({% slug disabledstate_animation %})).
|
|
192
|
+
* Specifies whether to animate the entering (showing) element ([see example]({% slug disabledstate_animation %})).
|
|
193
|
+
*
|
|
194
|
+
* @default true
|
|
191
195
|
*/
|
|
192
196
|
enter?: boolean;
|
|
193
197
|
/**
|
|
194
|
-
* Specifies whether to animate a leaving (disappearing) element ([see example]({% slug disabledstate_animation %})).
|
|
198
|
+
* Specifies whether to animate a leaving (disappearing) element ([see example]({% slug disabledstate_animation %})).
|
|
199
|
+
*
|
|
200
|
+
* @default true
|
|
195
201
|
*/
|
|
196
202
|
exit?: boolean;
|
|
197
203
|
/**
|
|
198
|
-
* Specifies the duration of the transition for the entering (`animation in`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated.
|
|
204
|
+
* Specifies the duration of the transition for the entering (`animation in`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated.
|
|
205
|
+
*
|
|
206
|
+
* @default 300
|
|
199
207
|
*/
|
|
200
208
|
transitionEnterDuration?: number;
|
|
201
209
|
/**
|
|
202
|
-
* Specifies the duration of the transition for the exiting (`animation out`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated.
|
|
210
|
+
* Specifies the duration of the transition for the exiting (`animation out`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated.
|
|
211
|
+
*
|
|
212
|
+
* @default 300
|
|
203
213
|
*/
|
|
204
214
|
transitionExitDuration?: number;
|
|
205
215
|
/**
|
|
206
|
-
* Specifies if the Animation
|
|
216
|
+
* Specifies if the Animation uses lazy-mounting on the first `in={true}`.
|
|
217
|
+
*
|
|
218
|
+
* @default false
|
|
207
219
|
*/
|
|
208
220
|
mountOnEnter?: boolean;
|
|
209
221
|
/**
|
|
210
|
-
* Specifies if the Animation
|
|
222
|
+
* Specifies if the Animation unmounts after it reaches its exited state.
|
|
223
|
+
*
|
|
224
|
+
* @default false
|
|
211
225
|
*/
|
|
212
226
|
unmountOnExit?: boolean;
|
|
213
227
|
}
|
|
@@ -231,8 +245,9 @@ export declare interface AnimationProps extends AnimationInterface {
|
|
|
231
245
|
*/
|
|
232
246
|
className?: string;
|
|
233
247
|
/**
|
|
234
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
248
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
235
249
|
*
|
|
250
|
+
* @default "div"
|
|
236
251
|
* @example
|
|
237
252
|
* <Animation component="main" />
|
|
238
253
|
*/
|
|
@@ -325,8 +340,7 @@ export declare const Expand: {
|
|
|
325
340
|
export declare type ExpandDirection = 'horizontal' | 'vertical';
|
|
326
341
|
|
|
327
342
|
/**
|
|
328
|
-
*
|
|
329
|
-
*
|
|
343
|
+
* Represents the props of the [KendoReact Expand Animation component]({% slug animationtypes_animation %}#toc-expand).
|
|
330
344
|
*/
|
|
331
345
|
export declare interface ExpandProps extends AnimationInterface {
|
|
332
346
|
/**
|
|
@@ -344,15 +358,17 @@ export declare interface ExpandProps extends AnimationInterface {
|
|
|
344
358
|
*/
|
|
345
359
|
className?: string;
|
|
346
360
|
/**
|
|
347
|
-
* Specifies the direction of the Expand Animation.
|
|
361
|
+
* Specifies the direction of the Expand Animation.
|
|
348
362
|
*
|
|
363
|
+
* @default "vertical"
|
|
349
364
|
* @example
|
|
350
365
|
* <Expand direction="horizontal" />
|
|
351
366
|
*/
|
|
352
367
|
direction?: ExpandDirection;
|
|
353
368
|
/**
|
|
354
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
369
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
355
370
|
*
|
|
371
|
+
* @default "div"
|
|
356
372
|
* @example
|
|
357
373
|
* <Expand component="nav" />
|
|
358
374
|
*/
|
|
@@ -386,7 +402,7 @@ export declare const Fade: {
|
|
|
386
402
|
};
|
|
387
403
|
|
|
388
404
|
/**
|
|
389
|
-
*
|
|
405
|
+
* Represents the props of the [KendoReact Fade Animation component]({% slug animationtypes_animation %}#toc-fade).
|
|
390
406
|
*/
|
|
391
407
|
export declare interface FadeProps extends AnimationInterface {
|
|
392
408
|
/**
|
|
@@ -404,8 +420,9 @@ export declare interface FadeProps extends AnimationInterface {
|
|
|
404
420
|
*/
|
|
405
421
|
className?: string;
|
|
406
422
|
/**
|
|
407
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
423
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
408
424
|
*
|
|
425
|
+
* @default "div"
|
|
409
426
|
* @example
|
|
410
427
|
* <Fade component="header" />
|
|
411
428
|
*/
|
|
@@ -452,7 +469,7 @@ export declare const Push: {
|
|
|
452
469
|
export declare type PushDirection = 'up' | 'down' | 'left' | 'right';
|
|
453
470
|
|
|
454
471
|
/**
|
|
455
|
-
*
|
|
472
|
+
* Represents the props of the [KendoReact Push Animation component]({% slug animationtypes_animation %}#toc-push).
|
|
456
473
|
*/
|
|
457
474
|
export declare interface PushProps extends AnimationInterface {
|
|
458
475
|
/**
|
|
@@ -470,15 +487,17 @@ export declare interface PushProps extends AnimationInterface {
|
|
|
470
487
|
*/
|
|
471
488
|
className?: string;
|
|
472
489
|
/**
|
|
473
|
-
* Specifies the direction of the Push Animation.
|
|
490
|
+
* Specifies the direction of the Push Animation.
|
|
474
491
|
*
|
|
492
|
+
* @default "right"
|
|
475
493
|
* @example
|
|
476
494
|
* <Push direction="up" />
|
|
477
495
|
*/
|
|
478
496
|
direction?: PushDirection;
|
|
479
497
|
/**
|
|
480
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
498
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
481
499
|
*
|
|
500
|
+
* @default "div"
|
|
482
501
|
* @example
|
|
483
502
|
* <Push component="footer" />
|
|
484
503
|
*/
|
|
@@ -498,8 +517,9 @@ export declare interface PushProps extends AnimationInterface {
|
|
|
498
517
|
*/
|
|
499
518
|
style?: any;
|
|
500
519
|
/**
|
|
501
|
-
* Determines whether child elements will stack on top of each other during the animation.
|
|
520
|
+
* Determines whether child elements will stack on top of each other during the animation.
|
|
502
521
|
*
|
|
522
|
+
* @default false
|
|
503
523
|
* @example
|
|
504
524
|
* <Push stackChildren={true} />
|
|
505
525
|
*/
|
|
@@ -529,7 +549,7 @@ export declare const Reveal: {
|
|
|
529
549
|
export declare type RevealDirection = 'horizontal' | 'vertical';
|
|
530
550
|
|
|
531
551
|
/**
|
|
532
|
-
*
|
|
552
|
+
* Represents the props of the [KendoReact Reveal Animation component]({% slug animationtypes_animation %}#toc-reveal).
|
|
533
553
|
*/
|
|
534
554
|
export declare interface RevealProps extends AnimationInterface {
|
|
535
555
|
/**
|
|
@@ -547,15 +567,17 @@ export declare interface RevealProps extends AnimationInterface {
|
|
|
547
567
|
*/
|
|
548
568
|
className?: string;
|
|
549
569
|
/**
|
|
550
|
-
* Specifies the direction of the Reveal Animation.
|
|
570
|
+
* Specifies the direction of the Reveal Animation.
|
|
551
571
|
*
|
|
572
|
+
* @default "vertical"
|
|
552
573
|
* @example
|
|
553
574
|
* <Reveal direction="horizontal" />
|
|
554
575
|
*/
|
|
555
576
|
direction?: RevealDirection;
|
|
556
577
|
/**
|
|
557
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
578
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
558
579
|
*
|
|
580
|
+
* @default "div"
|
|
559
581
|
* @example
|
|
560
582
|
* <Reveal component="aside" />
|
|
561
583
|
*/
|
|
@@ -606,7 +628,7 @@ export declare const Slide: {
|
|
|
606
628
|
export declare type SlideDirection = 'up' | 'down' | 'left' | 'right';
|
|
607
629
|
|
|
608
630
|
/**
|
|
609
|
-
*
|
|
631
|
+
* Represents the props of the [KendoReact Slide Animation component]({% slug animationtypes_animation %}#toc-slide).
|
|
610
632
|
*/
|
|
611
633
|
export declare interface SlideProps extends AnimationInterface {
|
|
612
634
|
/**
|
|
@@ -624,15 +646,17 @@ export declare interface SlideProps extends AnimationInterface {
|
|
|
624
646
|
*/
|
|
625
647
|
className?: string;
|
|
626
648
|
/**
|
|
627
|
-
* Specifies the direction of the Slide Animation.
|
|
649
|
+
* Specifies the direction of the Slide Animation.
|
|
628
650
|
*
|
|
651
|
+
* @default "down"
|
|
629
652
|
* @example
|
|
630
653
|
* <Slide direction="left" />
|
|
631
654
|
*/
|
|
632
655
|
direction?: SlideDirection;
|
|
633
656
|
/**
|
|
634
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
657
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
635
658
|
*
|
|
659
|
+
* @default "div"
|
|
636
660
|
* @example
|
|
637
661
|
* <Slide component="article" />
|
|
638
662
|
*/
|
|
@@ -680,7 +704,7 @@ export declare const Zoom: {
|
|
|
680
704
|
export declare type ZoomDirection = 'in' | 'out';
|
|
681
705
|
|
|
682
706
|
/**
|
|
683
|
-
*
|
|
707
|
+
* Represents the props of the [KendoReact Zoom Animation component]({% slug animationtypes_animation %}#toc-zoom).
|
|
684
708
|
*/
|
|
685
709
|
export declare interface ZoomProps extends AnimationInterface {
|
|
686
710
|
/**
|
|
@@ -698,15 +722,17 @@ export declare interface ZoomProps extends AnimationInterface {
|
|
|
698
722
|
*/
|
|
699
723
|
className?: string;
|
|
700
724
|
/**
|
|
701
|
-
* Specifies the direction of the Zoom Animation.
|
|
725
|
+
* Specifies the direction of the Zoom Animation.
|
|
702
726
|
*
|
|
727
|
+
* @default "out"
|
|
703
728
|
* @example
|
|
704
729
|
* <Zoom direction="in" />
|
|
705
730
|
*/
|
|
706
731
|
direction?: ZoomDirection;
|
|
707
732
|
/**
|
|
708
|
-
* Specifies the HTML tag of the parent Animation container.
|
|
733
|
+
* Specifies the HTML tag of the parent Animation container.
|
|
709
734
|
*
|
|
735
|
+
* @default "div"
|
|
710
736
|
* @example
|
|
711
737
|
* <Zoom component="section" />
|
|
712
738
|
*/
|
|
@@ -726,8 +752,9 @@ export declare interface ZoomProps extends AnimationInterface {
|
|
|
726
752
|
*/
|
|
727
753
|
style?: any;
|
|
728
754
|
/**
|
|
729
|
-
* Determines whether child elements will stack on top of each other during the animation.
|
|
755
|
+
* Determines whether child elements will stack on top of each other during the animation.
|
|
730
756
|
*
|
|
757
|
+
* @default false
|
|
731
758
|
* @example
|
|
732
759
|
* <Zoom stackChildren={true} />
|
|
733
760
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-animation",
|
|
3
|
-
"version": "12.0.2-develop.
|
|
3
|
+
"version": "12.0.2-develop.3",
|
|
4
4
|
"description": "React Animation component assists with animating HTML elements. KendoReact Animation package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.0",
|
|
29
|
-
"@progress/kendo-react-common": "12.0.2-develop.
|
|
29
|
+
"@progress/kendo-react-common": "12.0.2-develop.3",
|
|
30
30
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
31
31
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
32
32
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|