File tree Expand file tree Collapse file tree 3 files changed +19
-25
lines changed Expand file tree Collapse file tree 3 files changed +19
-25
lines changed Original file line number Diff line number Diff line change @@ -54,10 +54,6 @@ body {
54
54
55
55
/* Carousel-like transition */
56
56
57
- .carousel {
58
- overflow : hidden;
59
- }
60
-
61
57
.carousel-swap-leave {
62
58
transition : transform .3s ease-in-out;
63
59
transform : translate (0 , 0 );
73
69
.carousel-swap-enter-active {
74
70
transform : translate (0 , 0 );
75
71
}
72
+
73
+ .carousel-swap-height {
74
+ transition : height .3s ease-in-out;
75
+ }
Original file line number Diff line number Diff line change @@ -4,25 +4,22 @@ import ReactCSSTransitionReplace from '../../src/ReactCSSTransitionReplace.jsx';
4
4
5
5
class ContentSwapper extends React . Component {
6
6
7
- static propTypes = {
8
- swapped : React . PropTypes . bool
9
- } ;
10
-
11
- state = { swapped : this . props . swapped } ;
7
+ state = { swapped : false } ;
12
8
13
9
handleClick = ( ) => {
14
10
this . setState ( { swapped : ! this . state . swapped } ) ;
15
11
}
16
12
17
13
render ( ) {
18
14
const content = React . Children . toArray ( this . props . children ) ;
15
+ const { style = { } } = this . props ;
16
+
17
+ style . cursor = 'pointer' ;
19
18
20
19
return (
21
- < div onClick = { this . handleClick } style = { { cursor : 'pointer' } } >
22
- < ReactCSSTransitionReplace { ...this . props } >
23
- { this . state . swapped ? content [ 1 ] : content [ 0 ] }
24
- </ ReactCSSTransitionReplace >
25
- </ div >
20
+ < ReactCSSTransitionReplace { ...this . props } style = { style } onClick = { this . handleClick } >
21
+ { this . state . swapped ? content [ 1 ] : content [ 0 ] }
22
+ </ ReactCSSTransitionReplace >
26
23
) ;
27
24
}
28
25
}
Original file line number Diff line number Diff line change @@ -44,21 +44,18 @@ class Demo extends React.Component {
44
44
</ ContentSwapper >
45
45
46
46
< h2 > Fade out, then fade in transition</ h2 >
47
- < ContentSwapper transitionName = "fade-wait" transitionEnterTimeout = { 500 } transitionLeaveTimeout = { 500 } >
47
+ < ContentSwapper transitionName = "fade-wait" transitionEnterTimeout = { 1000 } transitionLeaveTimeout = { 1000 } >
48
48
< ContentLong key = "long" />
49
49
< ContentShort key = "short" />
50
50
</ ContentSwapper >
51
51
52
- < h2 > Carousel-like transition</ h2 >
53
-
54
- < div style = { { width : 600 } } >
55
- < ContentSwapper className = "carousel"
56
- transitionName = "carousel-swap" transitionEnterTimeout = { 500 } transitionLeaveTimeout = { 500 }
57
- transitionHeight = { false } >
58
- < img key = "img3" src = "/img/vista3.jpg" width = "600" height = "280" />
59
- < img key = "img4" src = "/img/vista4.jpg" width = "600" height = "280" />
60
- </ ContentSwapper >
61
- </ div >
52
+ < h2 > Carousel transition</ h2 >
53
+ < ContentSwapper style = { { width : 600 } }
54
+ transitionName = "carousel-swap" transitionEnterTimeout = { 500 } transitionLeaveTimeout = { 500 }
55
+ transitionHeight = { false } >
56
+ < img key = "img3" src = "/img/vista3.jpg" width = "600" height = "280" />
57
+ < img key = "img4" src = "/img/vista4.jpg" width = "600" height = "280" />
58
+ </ ContentSwapper >
62
59
63
60
</ Grid >
64
61
</ div >
You can’t perform that action at this time.
0 commit comments