Skip to content

Commit

Permalink
[added] animation example
Browse files Browse the repository at this point in the history
abused the [added] flag just for marketing in the
changelog cause THIS IS EPICLY AWESOME

closes remix-run#17
  • Loading branch information
ryanflorence committed Jul 26, 2014
1 parent b35a894 commit b8018b1
Show file tree
Hide file tree
Showing 2 changed files with 78 additions and 0 deletions.
41 changes: 41 additions & 0 deletions examples/animations/app.js
Original file line number Diff line number Diff line change
@@ -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);
37 changes: 37 additions & 0 deletions examples/animations/index.html
Original file line number Diff line number Diff line change
@@ -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>

0 comments on commit b8018b1

Please sign in to comment.