Skip to content

Commit eeba3a6

Browse files
marnuswmarnusw
committed
Full descriptions added to the demo for gh-pages.
1 parent 371869d commit eeba3a6

File tree

8 files changed

+103
-37
lines changed

8 files changed

+103
-37
lines changed

‎.gitignore‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
npm-debug.log
44

55
# Exclude compiled files
6-
/gh-pages
76
/lib
87

9-
demo/assets/app.js
8+
/demo/assets/app.js
9+
/gh-pages

‎README.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ the leaving component's animation completes. Following suit with the
1818
[React.js API](https://facebook.github.io/react/docs/animation.html#getting-started) the one caveat is
1919
that the transition duration must be specified in JavaScript as well as CSS.
2020

21+
[Live Examples](http://marnusw.github.io/react-css-transition-replace)
22+
2123

2224
## Installation
2325

@@ -79,7 +81,7 @@ transitions in the associated CSS classes:
7981
}
8082

8183
.cross-fade-height {
82-
transition: height 1s ease-in-out;
84+
transition: height .5s ease-in-out;
8385
}
8486
```
8587

‎demo/assets/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,14 +11,14 @@
1111
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
1212
<link rel="stylesheet" href="//bootswatch.com/cerulean/bootstrap.min.css">
1313

14-
<link rel="stylesheet" type="text/css" href="/styles.css">
15-
<link rel="stylesheet" type="text/css" href="/transitions.css">
14+
<link rel="stylesheet" type="text/css" href="styles.css">
15+
<link rel="stylesheet" type="text/css" href="transitions.css">
1616
</head>
1717

1818
<body>
1919
<div id='demo'></div>
2020

21-
<script src="/app.js"></script>
21+
<script src="app.js"></script>
2222
</body>
2323

2424
</html>

‎demo/assets/styles.css‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,20 @@
1-
h2 {
2-
margin-top: 50px;
3-
}
41
body {
52
padding-bottom: 100px;
63
}
4+
5+
.page-head {
6+
max-width: 780px;
7+
font-size: 16px;
8+
}
9+
10+
h1 {
11+
margin-bottom: 16px;
12+
}
13+
14+
h3 {
15+
margin-top: 50px;
16+
}
17+
18+
.examples p {
19+
margin-bottom: 20px;
20+
}

‎demo/assets/transitions.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
}
1919

2020
.cross-fade-height {
21-
transition: height 1s ease-in-out;
21+
transition: height .5s ease-in-out;
2222
}
2323

2424

‎demo/components/Demo.jsx‎

Lines changed: 46 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import { Navbar, NavBrand, Nav, NavItem, Grid } from 'react-bootstrap';
33

4+
import PageHead from './PageHead.jsx';
45
import ContentSwapper from './ContentSwapper.jsx';
56

67
import ContentLong from './ContentLong.jsx';
@@ -10,10 +11,10 @@ class Demo extends React.Component {
1011

1112
componentDidMount() {
1213
const images = [
13-
'/img/vista1.jpg',
14-
'/img/vista2.jpg',
15-
'/img/vista3.jpg',
16-
'/img/vista4.jpg'
14+
'img/vista1.jpg',
15+
'img/vista2.jpg',
16+
'img/vista3.jpg',
17+
'img/vista4.jpg'
1718
];
1819

1920
images.forEach(src => {
@@ -33,28 +34,48 @@ class Demo extends React.Component {
3334
</Navbar>
3435

3536
<Grid>
36-
<br/>
37-
<p className="text-danger"><em>Click any content to trigger the transition.</em></p>
38-
39-
<h2>Cross-fade transition</h2>
40-
<ContentSwapper transitionName="cross-fade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
41-
<img key="img1" src="/img/vista1.jpg" width="600" height="235"/>
42-
<img key="img2" src="/img/vista2.jpg" width="600" height="280"/>
43-
</ContentSwapper>
44-
45-
<h2>Fade out, then fade in transition</h2>
46-
<ContentSwapper transitionName="fade-wait" transitionEnterTimeout={1000} transitionLeaveTimeout={400}>
47-
<ContentLong key="long"/>
48-
<ContentShort key="short"/>
49-
</ContentSwapper>
50-
51-
<h2>Carousel transition</h2>
52-
<ContentSwapper transitionName="carousel-swap" transitionEnterTimeout={500} transitionLeaveTimeout={500}
53-
style={{width: 600}}>
54-
<img key="img3" src="/img/vista3.jpg" width="600" height="255"/>
55-
<img key="img4" src="/img/vista4.jpg" width="600" height="280"/>
56-
</ContentSwapper>
37+
<PageHead />
5738

39+
<div className="examples">
40+
<h2>Examples</h2>
41+
<p className="text-danger"><em>Click any content to trigger the transition.</em></p>
42+
43+
<h3>Cross-fade transition</h3>
44+
<p>The <code>opacity</code> transitions for <code>enter</code> and <code>leave</code> are started
45+
at the same time. View the <a
46+
href="https://github.com/marnusw/react-css-transition-replace#cross-fading-two-components"
47+
target="_blank">CSS</a>.</p>
48+
49+
<ContentSwapper transitionName="cross-fade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
50+
<img key="img1" src="img/vista1.jpg" width="600" height="235"/>
51+
<img key="img2" src="img/vista2.jpg" width="600" height="280"/>
52+
</ContentSwapper>
53+
54+
<h3>Fade out, then fade in transition</h3>
55+
<p>The <code>opacity</code> transitions for <code>enter</code> animation is delayed until after
56+
the <code>leave</code> transition completes. View the <a
57+
href="https://github.com/marnusw/react-css-transition-replace#fade-out-then-fade-in"
58+
target="_blank">CSS</a>.</p>
59+
60+
<ContentSwapper transitionName="fade-wait" transitionEnterTimeout={1000} transitionLeaveTimeout={400}>
61+
<ContentLong key="long"/>
62+
<ContentShort key="short"/>
63+
</ContentSwapper>
64+
65+
<h3>Carousel transition</h3>
66+
<p>The slide animation is realised with a 2D CSS <code>transform</code>. View the <a
67+
href="transitions.css" target="_blank">CSS source</a>. To ensure the entering/leaving
68+
images are properly hidden the carousel width can be set directly on the container:
69+
<code>{'<ReactCSSTransitionReplace transitionName="carousel-swap" /*...*/ style={{width: 600}}>'}</code>.
70+
</p>
71+
72+
<ContentSwapper transitionName="carousel-swap" transitionEnterTimeout={500} transitionLeaveTimeout={500}
73+
style={{width: 600}}>
74+
<img key="img3" src="img/vista3.jpg" width="600" height="255"/>
75+
<img key="img4" src="img/vista4.jpg" width="600" height="280"/>
76+
</ContentSwapper>
77+
78+
</div>
5879
</Grid>
5980
</div>
6081
);

‎demo/components/PageHead.jsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
3+
4+
function PageHead() {
5+
return (
6+
<div className="page-head">
7+
<h1>react-css-transition-replace</h1>
8+
<p>
9+
A <a href="http://facebook.github.io/react" target="_blank">React</a> component to animate
10+
replacing one element with another.
11+
</p>
12+
13+
<p>
14+
While <a href="https://facebook.github.io/react/docs/animation.html" target="_blank">
15+
<code>ReactCSSTransitionGroup</code></a> does a great job of animating changes to a list of components and can
16+
even be used to animate the replacement of one item with another, proper handling of the container height in the
17+
latter case is not built in. This component is designed to do exactly that with an API closely following that
18+
of <code>ReactCSSTransitionGroup</code>.
19+
</p>
20+
21+
<p>For a full motivation and usage docs see the <a href="https://github.com/marnusw/react-css-transition-replace"
22+
target="_blank">README on GitHub</a>.</p>
23+
</div>
24+
);
25+
}
26+
27+
export default PageHead;

‎gulpfile.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
var gulp = require('gulp');
22
var eslint = require('gulp-eslint');
33

4-
gulp.task('lint', function () {
4+
gulp.task('lint', function() {
55
return gulp.src(['src/**', 'demo/app.js', 'demo/components/*.jsx'])
66
// eslint() attaches the lint output to the eslint property
77
// of the file object so it can be used by other modules.
@@ -65,10 +65,12 @@ gulp.task('demo', ['demo:bundleAndWatch'], function() {
6565
gulp.watch(['src/**', 'demo/app.js', 'demo/components/*.jsx'], ['lint']);
6666

6767
// Reload when the app CSS or bundled JS changes
68-
gulp.watch('demo/assets/transitions.css').on('change', reload);
68+
gulp.watch('demo/assets/*.css').on('change', reload);
6969
gulp.watch('demo/assets/app.js').on('change', reload);
7070
});
7171

72+
// gh-pages related tasks
73+
7274
gulp.task('gh-pages', ['demo:bundle'], function() {
7375
require('del').sync(['gh-pages/**/*.*', '!gh-pages', '!gh-pages/.git']);
7476
return gulp.src('demo/assets/**/*.*')

0 commit comments

Comments
 (0)