Skip to content

Commit 7fc546a

Browse files
committed
Simplify the demo implementation.
1 parent aa53140 commit 7fc546a

File tree

3 files changed

+19
-25
lines changed

3 files changed

+19
-25
lines changed

demo/assets/transitions.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,6 @@ body {
5454

5555
/* Carousel-like transition */
5656

57-
.carousel {
58-
overflow: hidden;
59-
}
60-
6157
.carousel-swap-leave {
6258
transition: transform .3s ease-in-out;
6359
transform: translate(0, 0);
@@ -73,3 +69,7 @@ body {
7369
.carousel-swap-enter-active {
7470
transform: translate(0, 0);
7571
}
72+
73+
.carousel-swap-height {
74+
transition: height .3s ease-in-out;
75+
}

demo/components/ContentSwapper.jsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,22 @@ import ReactCSSTransitionReplace from '../../src/ReactCSSTransitionReplace.jsx';
44

55
class ContentSwapper extends React.Component {
66

7-
static propTypes = {
8-
swapped: React.PropTypes.bool
9-
};
10-
11-
state = {swapped: this.props.swapped};
7+
state = {swapped: false};
128

139
handleClick = () => {
1410
this.setState({swapped: !this.state.swapped});
1511
}
1612

1713
render() {
1814
const content = React.Children.toArray(this.props.children);
15+
const { style = {} } = this.props;
16+
17+
style.cursor = 'pointer';
1918

2019
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>
2623
);
2724
}
2825
}

demo/components/Demo.jsx

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,18 @@ class Demo extends React.Component {
4444
</ContentSwapper>
4545

4646
<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}>
4848
<ContentLong key="long"/>
4949
<ContentShort key="short"/>
5050
</ContentSwapper>
5151

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>
6259

6360
</Grid>
6461
</div>

0 commit comments

Comments
 (0)