早期与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 for ReactJS v12.1
/**@jsx React.DOM*/ var ReactTransitionGroup = React.addons.CSSTransitionGroup; var HelloWorld = React.createClass({ render: function() { return (); } }); React.render( Hello world
, 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
任何帮助赞赏.
干杯,卢卡
我更深入地研究了这个问题.使用当前版本的ReactJS,似乎无法进行初始CSS转换.更多信息和想法在这里.
最有可能的事情会随着v0.13.x而改变.您可以查看具有transitionAppear 道具的源代码.
编辑:我从GitHub下载了最新的ReactJS(v0.13.0-alpha)并构建了它.如果你使用transitionAppear prop(显式设置为true),现在一切都可以正常工作.在下面,您将找到更新的CSS和JSX以及实例:
CSS:
.example-appear { opacity: 0.01; transition: opacity 0.5s ease-in; } .example-appear.example-appear-active { opacity: 1; }
JSX for ReactJS v0.13.0 - alpha:
/**@jsx React.DOM*/ var ReactTransitionGroup = React.addons.CSSTransitionGroup; var HelloWorld = React.createClass({ render: function() { return ( <ReactTransitionGroup transitionName="example" transitionAppear={true}> <h1>Hello world</h1> </ReactTransitionGroup> ); } }); React.render(<HelloWorld />, document.body);
实例:http://codepen.io/lanceschi/pen/NPxoGV
干杯,L
它看起来像CSSTransitionGroup
用于初始安装上的动画,但它不再是React v0.8.0左右.有关详细信息,请参阅https://github.com/facebook/react/issues/1304.
一种解决方案是简单地安装<h1>
后<HelloWorld>
安装,如下所示:
/**@jsx React.DOM*/ var ReactTransitionGroup = React.addons.CSSTransitionGroup; var HelloWorld = React.createClass({ getInitialState: function() { return { mounted: false }; }, componentDidMount: function() { this.setState({ mounted: true }); }, render: function() { var child = this.state.mounted ? <h1>Hello world</h1> : null; return ( <ReactTransitionGroup transitionName="example"> {child} </ReactTransitionGroup> ); } }); React.render(<HelloWorld />, document.body);
实例:http://codepen.io/peterjmag/pen/wBMRPX
请注意,CSSTransitionGroup
它用于在动态添加,删除和替换子组件时转换它们,而不一定是在初始渲染时为它们设置动画.玩这个TodoList Codepen(改编自React docs中的这个例子)来看看我的意思.列表项在添加和删除时淡入和淡出,但它们不会在初始渲染时淡入.
编辑:最近引入了一个新的"出现"过渡阶段,以允许动画安装效果.有关详细信息,请参阅https://github.com/facebook/react/pull/2512.(提交已经合并到master中,所以我想它将在v0.12.2中发布.)理论上,你可以做这样的事情来使<h1>
mount上的淡入:
JS
... <ReactTransitionGroup transitionName="example" transitionAppear={true}> <h1>Hello world</h1> </ReactTransitionGroup> ...
CSS
.example-appear { opacity: 0.01; transition: opacity .5s ease-in; } .example-appear.example-appear-active { opacity: 1; }