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 (
<ReactTransitionGroup transitionName="example">
<h1>Hello world</h1>
</ReactTransitionGroup>
);
}
});
React.render(<HelloWorld />, document.body);
以下是Codepens列表:
任何帮助表示感谢。
干杯, 卢卡
答案 0 :(得分:15)
看起来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
用于转换子组件,因为它们是动态添加,删除和替换的,不一定是为了在初始渲染时设置它们的动画。使用this TodoList Codepen(改编自this example in the React docs)来看看我的意思。列表项在添加和删除时淡入淡出,但它们不会在初始渲染时淡入。
编辑:新的&#34;出现&#34;最近引入了过渡阶段,以允许动画安装效果。有关详细信息,请参阅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;
}
答案 1 :(得分:7)
我更深入地研究了问题。使用当前版本的ReactJS,似乎无法进行初始CSS转换。更多信息和想法here。
最有可能的事情会随v0.13.x而改变。您可以查看具有 transitionAppear 道具的source code。
编辑:我从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
干杯, →
答案 2 :(得分:0)
出现
如果在安装
<Transition>
组件时显示该组件,则通常不会转换该组件。如果要在第一个挂载上将appear
转换为true
,则在<Transition>
挂载后组件将立即过渡。 from react-transition-group Docs
JSX:
<TransitionGroup>
<CSSTransition classNames="fade" appear={true} >
<h1>Hello world!</h1>
</CSSTransition>
</TransitionGroup>
CSS:
.fade-appear {
opacity: 0.01;
z-index: 1;
}
.fade-appear.fade-appear-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
截至: