Basic Example with JSX<\/title>\n+ <link rel=\"stylesheet\" href=\"..\/shared\/css\/base.css\" \/>\n+ <link rel=\"stylesheet\" href=\"transition.css\" \/>\n+ <\/head>\n+ <body>\n+ <h1>Example with Transitions<\/h1>\n+ <div id=\"container\">\n+ <p>\n+ To install React, follow the instructions on\n+ <a href=\"http:\/\/www.github.com\/facebook\/react\/\">GitHub<\/a>.\n+ <\/p>\n+ <p>\n+ If you can see this, React is not working right.\n+ If you checked out the source from GitHub make sure to run <code>grunt<\/code>.\n+ <\/p>\n+ <\/div>\n+ <h4>Example Details<\/h4>\n+ <ul>\n+ <li>\n+ This is built with\n+ <a href=\"https:\/\/github.com\/substack\/node-browserify\">browserify<\/a>.\n+ <\/li>\n+ <li>\n+ This is written with JSX and transformed in the browser.\n+ <\/li>\n+ <\/ul>\n+ <p>\n+ <\/p>\n+ <p>\n+ Learn more at\n+ <a href=\"http:\/\/facebook.github.io\/react\" target=\"_blank\">facebook.github.io\/react<\/a>.\n+ <\/p>\n+ <script src=\"..\/..\/build\/react-with-addons.js\"><\/script>\n+ <script src=\"..\/..\/build\/JSXTransformer.js\"><\/script>\n+ <script type=\"text\/jsx\">\n+ \/**\n+ * @jsx React.DOM\n+ *\/\n+ var TransitionGroup = React.addons.TransitionGroup;\n+ var INTERVAL = 2000;\n+\n+ var AnimateDemo = React.createClass({\n+ getInitialState: function() {\n+ return {start: 0};\n+ },\n+\n+ componentDidMount: function() {\n+ this.interval = setInterval(this.tick, INTERVAL);\n+ },\n+\n+ componentWillUnmount: function() {\n+ clearInterval(this.interval);\n+ },\n+\n+ tick: function() {\n+ this.setState({start: this.state.start + 1});\n+ },\n+\n+ render: function() {\n+ var children = [];\n+ var pos = 0;\n+ var colors = ['red', 'gray', 'blue'];\n+ for (var i = this.state.start; i < this.state.start + 3; i++) {\n+ var style = {\n+ left: pos * 128,\n+ background: colors[i % 3]\n+ };\n+ pos++;\n+ children.push(<div key={i} className=\"animateItem\" style={style}>{i}<\/div>);\n+ }\n+ return (\n+ <TransitionGroup\n+ className=\"animateExample\"\n+ transitionName=\"example\">\n+ {children}\n+ <\/TransitionGroup>\n+ );\n+ }\n+ });\n+\n+ React.renderComponent(\n+ <AnimateDemo \/>,\n+ document.getElementById('container')\n+ );\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/examples\/transitions\/transition.css b\/examples\/transitions\/transition.css\nnew file mode 100644\nindex 0000000000..eeaead7c4c\n--- \/dev\/null\n+++ b\/examples\/transitions\/transition.css\n@@ -0,0 +1,44 @@\n+.example-enter,\n+.example-leave {\n+ -webkit-transition: all .25s;\n+ transition: all .25s;\n+}\n+\n+.example-enter,\n+.example-leave.example-leave-active {\n+ opacity: 0.01;\n+}\n+\n+.example-leave.example-leave-active {\n+ margin-left: -128px;\n+}\n+\n+.example-enter {\n+ margin-left: 128px;\n+}\n+\n+.example-enter.example-enter-active,\n+.example-leave {\n+ margin-left: 0;\n+ opacity: 0.99;\n+}\n+\n+.animateExample {\n+ display: block;\n+ height: 128px;\n+ position: relative;\n+ width: 384px;\n+}\n+\n+.animateItem {\n+ color: white;\n+ font-size: 36px;\n+ font-weight: bold;\n+ height: 128px;\n+ line-height: 128px;\n+ position: absolute;\n+ text-align: center;\n+ -webkit-transition: all .25s; \/* TODO: make this a move animation *\/\n+ transition: all .25s; \/* TODO: make this a move animation *\/\n+ width: 128px;\n+}\n","parents":["de9e94de5f807f1ce1c03f3b67618452b3a6287a"]}</article></body></html>

{"body":"","commit":{"revision":"7da874d835519bf1dfa9ca04f4e31bac9b827d5e","subject":"Add TransitionGroup example","shortRevision":"7da874d835","authorEmail":"paul@oshannessy.com","authoredAt":"2013-10-02T11:41:35-07:00","authorName":"Paul O’Shannessy"},"files":[{"path":"examples\/transitions\/index.html","status":"A"},{"path":"examples\/transitions\/transition.css","status":"A"}],"patch":"diff --git a\/examples\/transitions\/index.html b\/examples\/transitions\/index.html\nnew file mode 100644\nindex 0000000000..63b2322854\n--- \/dev\/null\n+++ b\/examples\/transitions\/index.html\n@@ -0,0 +1,91 @@\n+\n+\n+ \n+ \n+ Basic Example with JSX<\/title>\n+ <link rel=\"stylesheet\" href=\"..\/shared\/css\/base.css\" \/>\n+ <link rel=\"stylesheet\" href=\"transition.css\" \/>\n+ <\/head>\n+ <body>\n+ <h1>Example with Transitions<\/h1>\n+ <div id=\"container\">\n+ <p>\n+ To install React, follow the instructions on\n+ <a href=\"http:\/\/www.github.com\/facebook\/react\/\">GitHub<\/a>.\n+ <\/p>\n+ <p>\n+ If you can see this, React is not working right.\n+ If you checked out the source from GitHub make sure to run <code>grunt<\/code>.\n+ <\/p>\n+ <\/div>\n+ <h4>Example Details<\/h4>\n+ <ul>\n+ <li>\n+ This is built with\n+ <a href=\"https:\/\/github.com\/substack\/node-browserify\">browserify<\/a>.\n+ <\/li>\n+ <li>\n+ This is written with JSX and transformed in the browser.\n+ <\/li>\n+ <\/ul>\n+ <p>\n+ <\/p>\n+ <p>\n+ Learn more at\n+ <a href=\"http:\/\/facebook.github.io\/react\" target=\"_blank\">facebook.github.io\/react<\/a>.\n+ <\/p>\n+ <script src=\"..\/..\/build\/react-with-addons.js\"><\/script>\n+ <script src=\"..\/..\/build\/JSXTransformer.js\"><\/script>\n+ <script type=\"text\/jsx\">\n+ \/**\n+ * @jsx React.DOM\n+ *\/\n+ var TransitionGroup = React.addons.TransitionGroup;\n+ var INTERVAL = 2000;\n+\n+ var AnimateDemo = React.createClass({\n+ getInitialState: function() {\n+ return {start: 0};\n+ },\n+\n+ componentDidMount: function() {\n+ this.interval = setInterval(this.tick, INTERVAL);\n+ },\n+\n+ componentWillUnmount: function() {\n+ clearInterval(this.interval);\n+ },\n+\n+ tick: function() {\n+ this.setState({start: this.state.start + 1});\n+ },\n+\n+ render: function() {\n+ var children = [];\n+ var pos = 0;\n+ var colors = ['red', 'gray', 'blue'];\n+ for (var i = this.state.start; i < this.state.start + 3; i++) {\n+ var style = {\n+ left: pos * 128,\n+ background: colors[i % 3]\n+ };\n+ pos++;\n+ children.push(<div key={i} className=\"animateItem\" style={style}>{i}<\/div>);\n+ }\n+ return (\n+ <TransitionGroup\n+ className=\"animateExample\"\n+ transitionName=\"example\">\n+ {children}\n+ <\/TransitionGroup>\n+ );\n+ }\n+ });\n+\n+ React.renderComponent(\n+ <AnimateDemo \/>,\n+ document.getElementById('container')\n+ );\n+ <\/script>\n+ <\/body>\n+<\/html>\ndiff --git a\/examples\/transitions\/transition.css b\/examples\/transitions\/transition.css\nnew file mode 100644\nindex 0000000000..eeaead7c4c\n--- \/dev\/null\n+++ b\/examples\/transitions\/transition.css\n@@ -0,0 +1,44 @@\n+.example-enter,\n+.example-leave {\n+ -webkit-transition: all .25s;\n+ transition: all .25s;\n+}\n+\n+.example-enter,\n+.example-leave.example-leave-active {\n+ opacity: 0.01;\n+}\n+\n+.example-leave.example-leave-active {\n+ margin-left: -128px;\n+}\n+\n+.example-enter {\n+ margin-left: 128px;\n+}\n+\n+.example-enter.example-enter-active,\n+.example-leave {\n+ margin-left: 0;\n+ opacity: 0.99;\n+}\n+\n+.animateExample {\n+ display: block;\n+ height: 128px;\n+ position: relative;\n+ width: 384px;\n+}\n+\n+.animateItem {\n+ color: white;\n+ font-size: 36px;\n+ font-weight: bold;\n+ height: 128px;\n+ line-height: 128px;\n+ position: absolute;\n+ text-align: center;\n+ -webkit-transition: all .25s; \/* TODO: make this a move animation *\/\n+ transition: all .25s; \/* TODO: make this a move animation *\/\n+ width: 128px;\n+}\n","parents":["de9e94de5f807f1ce1c03f3b67618452b3a6287a"]}</article></body></html>

dillon1000/react

Files changed