[added] animation example

abused the [added] flag just for marketing in the changelog cause THIS IS EPICLY AWESOME closes remix-run#17
danieljuhl · Jul 26, 2014 · b8018b1 · b8018b1
1 parent b35a894
commit b8018b1
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 0 deletions.
diff --git a/examples/animations/app.js b/examples/animations/app.js
@@ -0,0 +1,41 @@
+/** @jsx React.DOM */
+var React = require('react');
+var Router = require('../../modules/main');
+var Route = Router.Route;
+var Link = Router.Link;
+var Transition = require('react/lib/ReactCSSTransitionGroup');
+
+var App = React.createClass({
+  render: function() {
+    return (
+      <div>
+        <ul>
+          <li><Link to="image" service="kitten">Kitten</Link></li>
+          <li><Link to="image" service="cage">Cage</Link></li>
+        </ul>
+        <Transition transitionName="example">
+          {this.props.activeRouteHandler()}
+        </Transition>
+      </div>
+    );
+  }
+});
+
+var Image = React.createClass({
+  render: function() {
+    var src = "http://place"+this.props.params.service+".com/400/400";
+    return (
+      <div className="Image">
+        <img src={src}/>
+      </div>
+    );
+  }
+});
+
+var routes = (
+  <Route handler={App}>
+    <Route name="image" path="/:service" handler={Image}/>
+  </Route>
+);
+
+React.renderComponent(routes, document.body);
diff --git a/examples/animations/index.html b/examples/animations/index.html
@@ -0,0 +1,37 @@
+<!doctype html public "restroom">
+<title>Dynamic Segments Example</title>
+<link href="../app.css" rel="stylesheet"/>
+<style>
+.Image {
+  position: relative;
+}
+
+.Image img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 400;
+  width: 400;
+  background: gray;
+}
+
+.example-enter {
+  opacity: 0.01;
+  transition: opacity .5s ease-in;
+}
+
+.example-enter.example-enter-active {
+  opacity: 1;
+}
+
+.example-leave {
+  opacity: 1;
+  transition: opacity .5s ease-in;
+}
+
+.example-leave.example-leave-active {
+  opacity: 0.01;
+}
+</style>
+<body>
+<script src="../build/animations.js"></script>