mirror of
https://github.com/facebook/react.git
synced 2026-02-27 03:07:57 +00:00
46 lines
1.2 KiB
HTML
46 lines
1.2 KiB
HTML
<html>
|
|
<body>
|
|
<script src="https://unpkg.com/systemjs@0.19.41/dist/system.js"></script>
|
|
<style>
|
|
.example-appear {
|
|
opacity: 0.01;
|
|
}
|
|
|
|
.example-appear.example-appear-active {
|
|
opacity: 1;
|
|
transition: opacity .5s ease-in;
|
|
}
|
|
</style>
|
|
<div id="container"></div>
|
|
<script>
|
|
System.config({
|
|
paths: {
|
|
react: '../../build/react-with-addons.js',
|
|
'react-dom': '../../build/react-dom.js'
|
|
}
|
|
});
|
|
|
|
Promise.all([
|
|
System.import("react"),
|
|
System.import("react-dom")
|
|
]).then(function (deps) {
|
|
var React = deps[0];
|
|
var ReactDOM = deps[1];
|
|
|
|
var CSSTransitionGroup = React.addons.CSSTransitionGroup;
|
|
ReactDOM.render(
|
|
React.createElement(CSSTransitionGroup, {
|
|
transitionName: 'example',
|
|
transitionAppear: true,
|
|
transitionAppearTimeout: 500,
|
|
transitionEnterTimeout: 0,
|
|
transitionLeaveTimeout: 0,
|
|
}, React.createElement('h1', null,
|
|
'Hello World!'
|
|
)),
|
|
document.getElementById('container')
|
|
);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |