Skip to content

Instantly share code, notes, and snippets.

@liuyanghejerry

liuyanghejerry/index.html

Forked from anonymous/index.html
Last active Aug 29, 2015
Embed
What would you like to do?
Component switch animation with React
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-with-addons-0.13.1.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}
.child.a {
z-index: 2;
}
.child.b {
z-index: 1;
}
.sample-enter {
opacity: 0;
transition: opacity .5s ease-in;
}
.sample-enter.sample-enter-active {
opacity: 1;
}
.sample-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.sample-leave.sample-leave-active {
opacity: 0;
}
</style>
</head>
<body>
<script id="jsbin-javascript">
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Sample = React.createClass({displayName: 'Sample',
getInitialState: function() {
return {
time: (+new Date()) / 1000
}
},
componentDidMount: function() {
var self = this;
setInterval(function() {
self.setState({
time: parseInt((+new Date()) / 1000, 10)
});
}, 1000);
},
renderElement: function() {
console.log(this.state.time);
if(this.state.time % 2 === 0) {
return (React.createElement("div", {className: "child a", key: "a"}, "aaaaaa"));
} else {
return (React.createElement("div", {className: "child b", key: "b"}, "bbbbbb"));
}
},
render: function() {
return (
React.createElement("div", null,
React.createElement(ReactCSSTransitionGroup, {transitionName: "sample", transitionAppear: false, className: "parent"},
this.renderElement()
)
)
);
}
});
React.render(React.createElement(Sample, null), document.body);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.13.1.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
&.a {
z-index: 2;
}
&.b {
z-index: 1;
}
}
.sample-enter {
opacity: 0;
transition: opacity .5s ease-in;
}
.sample-enter.sample-enter-active {
opacity: 1;
}
.sample-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.sample-leave.sample-leave-active {
opacity: 0;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Sample = React.createClass({
getInitialState: function() {
return {
time: (+new Date()) / 1000
}
},
componentDidMount: function() {
var self = this;
setInterval(function() {
self.setState({
time: parseInt((+new Date()) / 1000, 10)
});
}, 1000);
},
renderElement: function() {
console.log(this.state.time);
if(this.state.time % 2 === 0) {
return (<div className="child a" key="a">aaaaaa</div>);
} else {
return (<div className="child b" key="b">bbbbbb</div>);
}
},
render: function() {
return (
<div>
<ReactCSSTransitionGroup transitionName="sample" transitionAppear={false} className="parent">
{this.renderElement()}
</ReactCSSTransitionGroup>
</div>
);
}
});
React.render(<Sample/>, document.body);</script></body>
</html>
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
}
.child.a {
z-index: 2;
}
.child.b {
z-index: 1;
}
.sample-enter {
opacity: 0;
transition: opacity .5s ease-in;
}
.sample-enter.sample-enter-active {
opacity: 1;
}
.sample-leave {
opacity: 1;
transition: opacity .5s ease-in;
}
.sample-leave.sample-leave-active {
opacity: 0;
}
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Sample = React.createClass({displayName: 'Sample',
getInitialState: function() {
return {
time: (+new Date()) / 1000
}
},
componentDidMount: function() {
var self = this;
setInterval(function() {
self.setState({
time: parseInt((+new Date()) / 1000, 10)
});
}, 1000);
},
renderElement: function() {
console.log(this.state.time);
if(this.state.time % 2 === 0) {
return (React.createElement("div", {className: "child a", key: "a"}, "aaaaaa"));
} else {
return (React.createElement("div", {className: "child b", key: "b"}, "bbbbbb"));
}
},
render: function() {
return (
React.createElement("div", null,
React.createElement(ReactCSSTransitionGroup, {transitionName: "sample", transitionAppear: false, className: "parent"},
this.renderElement()
)
)
);
}
});
React.render(React.createElement(Sample, null), document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.