ранние дни с Facebook ReactJS. Простой переход к постепенному переходу CSS. Он работает так, как ожидалось, с ReactJS v0.5.1. Это не с v11.1, v12.0, v12.1. Здесь CSS и JSX:
CSS
.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;
}
JSX для ReactJS v12.1
/**@jsx React.DOM*/
var ReactTransitionGroup = React.addons.CSSTransitionGroup;
var HelloWorld = React.createClass({
render: function() {
return (
<ReactTransitionGroup transitionName="example">
<h1>Hello world</h1>
</ReactTransitionGroup>
);
}
});
React.render(<HelloWorld />, document.body);
Здесь список Codepens:
- v0.5.1 http://codepen.io/lanceschi/pen/ByjGPW
- v0.11.1 http://codepen.io/lanceschi/pen/LEGXgP
- v0.12.0 http://codepen.io/lanceschi/pen/ByjGOR
- v0.12.1 http://codepen.io/lanceschi/pen/YPwROy
Любая помощь была оценена.
Cheers, Лука