@@ -24,54 +24,6 @@ npm install react-css-transition --save
24
24
- Support the application of initial values before a transition
25
25
- Includes typescript definitions
26
26
27
- ## Examples
28
-
29
- A component that fades in when props changes to ` active=true ` and fades out when ` active=false ` :
30
-
31
- ``` js
32
- import * as React from " react" ;
33
- import { CSSTransition , transit } from " react-css-transition" ;
34
-
35
- const FadeInOutComponent = ({active, ... rest}) => (
36
- < CSSTransition
37
- defaultStyle= {{ opacity: 0 }}
38
- enterStyle= {{ opacity: transit (1.0 , 500 , " ease-in-out" ) }}
39
- leaveStyle= {{ opacity: transit (0 , 500 , " ease-in-out" ) }}
40
- activeStyle= {{ opacity: 1.0 }}
41
- active= {active}
42
- >
43
- < MyComponent {... rest} / >
44
- < / CSSTransition>
45
- );
46
- ```
47
-
48
- A transition group that fades in and out its children when entering or leaving the DOM:
49
-
50
- ``` js
51
- import { CSSTransitionGroup , CSSTransition , transit } from " react-css-transition" ;
52
-
53
- const FadeInOut = (props ) => (
54
- < CSSTransition
55
- {... props}
56
- defaultStyle= {{ opacity: 0 }}
57
- enterStyle= {{ opacity: transit (1.0 , 500 , " ease-in-out" ) }}
58
- leaveStyle= {{ opacity: transit (0 , 500 , " ease-in-out" ) }}
59
- activeStyle= {{ opacity: 1.0 }}
60
- / >
61
- );
62
-
63
- const FadeInOutGroup = (props ) => (
64
- < CSSTransitionGroup {... props}>
65
- {
66
- React .Children .map (
67
- props .children ,
68
- (child ) => < FadeInOut> {child}< / FadeInOut> ,
69
- )
70
- }
71
- < / CSSTransitionGroup>
72
- );
73
- ```
74
-
75
27
## License
76
28
77
29
MIT
0 commit comments