Add TransitionGroup example
Paul O’Shannessy committed
Oct 2, 2013 at 11:41 UTC
7da874d835519bf1dfa9ca04f4e31bac9b827d5e
2 files changed
+135
examples/transitions/index.html
new
+91
@@ -0,0 +1,91 @@
1
+<!DOCTYPE html>
2
+<html>
3
+ <head>
4
+ <meta http-equiv='Content-type' content='text/html; charset=utf-8'>
5
+ <title>Basic Example with JSX</title>
6
+ <link rel="stylesheet" href="../shared/css/base.css" />
7
+ <link rel="stylesheet" href="transition.css" />
8
+ </head>
9
+ <body>
10
+ <h1>Example with Transitions</h1>
11
+ <div id="container">
12
+ <p>
13
+ To install React, follow the instructions on
14
+ <a href="http://www.github.com/facebook/react/">GitHub</a>.
15
+ </p>
16
+ <p>
17
+ If you can see this, React is not working right.
18
+ If you checked out the source from GitHub make sure to run <code>grunt</code>.
19
+ </p>
20
+ </div>
21
+ <h4>Example Details</h4>
22
+ <ul>
23
+ <li>
24
+ This is built with
25
+ <a href="https://github.com/substack/node-browserify">browserify</a>.
26
+ </li>
27
+ <li>
28
+ This is written with JSX and transformed in the browser.
29
+ </li>
30
+ </ul>
31
+ <p>
32
+ </p>
33
+ <p>
34
+ Learn more at
35
+ <a href="http://facebook.github.io/react" target="_blank">facebook.github.io/react</a>.
36
+ </p>
37
+ <script src="../../build/react-with-addons.js"></script>
38
+ <script src="../../build/JSXTransformer.js"></script>
39
+ <script type="text/jsx">
40
+ /**
41
+ * @jsx React.DOM
42
+ */
43
+ var TransitionGroup = React.addons.TransitionGroup;
44
+ var INTERVAL = 2000;
45
+
46
+ var AnimateDemo = React.createClass({
47
+ getInitialState: function() {
48
+ return {start: 0};
49
+ },
50
+
51
+ componentDidMount: function() {
52
+ this.interval = setInterval(this.tick, INTERVAL);
53
+ },
54
+
55
+ componentWillUnmount: function() {
56
+ clearInterval(this.interval);
57
+ },
58
+
59
+ tick: function() {
60
+ this.setState({start: this.state.start + 1});
61
+ },
62
+
63
+ render: function() {
64
+ var children = [];
65
+ var pos = 0;
66
+ var colors = ['red', 'gray', 'blue'];
67
+ for (var i = this.state.start; i < this.state.start + 3; i++) {
68
+ var style = {
69
+ left: pos * 128,
70
+ background: colors[i % 3]
71
+ };
72
+ pos++;
73
+ children.push(<div key={i} className="animateItem" style={style}>{i}</div>);
74
+ }
75
+ return (
76
+ <TransitionGroup
77
+ className="animateExample"
78
+ transitionName="example">
79
+ {children}
80
+ </TransitionGroup>
81
+ );
82
+ }
83
+ });
84
+
85
+ React.renderComponent(
86
+ <AnimateDemo />,
87
+ document.getElementById('container')
88
+ );
89
+ </script>
90
+ </body>
91
+</html>
examples/transitions/transition.css
new
+44
@@ -0,0 +1,44 @@
1
+.example-enter,
2
+.example-leave {
3
+ -webkit-transition: all .25s;
4
+ transition: all .25s;
5
+}
6
+
7
+.example-enter,
8
+.example-leave.example-leave-active {
9
+ opacity: 0.01;
10
+}
11
+
12
+.example-leave.example-leave-active {
13
+ margin-left: -128px;
14
+}
15
+
16
+.example-enter {
17
+ margin-left: 128px;
18
+}
19
+
20
+.example-enter.example-enter-active,
21
+.example-leave {
22
+ margin-left: 0;
23
+ opacity: 0.99;
24
+}
25
+
26
+.animateExample {
27
+ display: block;
28
+ height: 128px;
29
+ position: relative;
30
+ width: 384px;
31
+}
32
+
33
+.animateItem {
34
+ color: white;
35
+ font-size: 36px;
36
+ font-weight: bold;
37
+ height: 128px;
38
+ line-height: 128px;
39
+ position: absolute;
40
+ text-align: center;
41
+ -webkit-transition: all .25s; /* TODO: make this a move animation */
42
+ transition: all .25s; /* TODO: make this a move animation */
43
+ width: 128px;
44
+}