我在ReactCSSTransitionGroup上遇到了一些麻烦。当用户单击页面上的按钮时,我想显示一种带有一些精美动画的模态形式。这是代码:
import React from 'react';
import ReactDOM from 'react-dom';
import AppConfig from './AppConfig';
export default class AppTop extends React.Component {
constructor(props) {
super(props);
this.state = { openConfig: false };
}
toggleConfig() {
this.setState({ openConfig: !this.state.openConfig });
}
render() {
// only shows up openConfig is true
const domAppConfig = this.state.openConfig ? <AppConfig ... /> : '';
return (
<div>
... //some elements
<button onClick={this.toggleConfig.bind(this)}>Config</button>
{ domAppConfig }
</div>
);
}
}
这是AppTop组件。您可以看到渲染内部的按钮组件,单击此按钮,将切换openConfig状态。现在这是AppConfig组件:
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
export default class AppConfig extends React.Component {
render() {
return (
<ReactCSSTransitionGroup
transitionName="anim-app-config"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
<div id="app-config">
<h1>App Config</h1>
<p>Helloworld!</p>
</div>
</ReactCSSTransitionGroup>
);
}
}
组件非常简单,只需打印一些文本即可。这是“ .anim-app-config”的样式:
.anim-app-config-enter {
opacity: .1;
}
.anim-app-config-enter.anim-app-config-enter-active {
opacity: 1;
transition: opacity 300ms ease-in;
}
.anim-app-config-leave {
opacity: 1;
}
.anim-app-config-leave.anim-app-config-leave-active {
opacity: .1;
transition: opacity 300ms ease-in;
}
当我运行此应用程序时,动画不起作用。 Just组件显示并立即隐藏,没有动画。我进行了搜索,然后尝试将密钥添加到AppConfig组件中,但没有成功。再包装一个div也不起作用。添加transitionAppear = {true}对我也不起作用。
我使用ReactCSSTransitionGroup组件会错吗?还是我错过了什么?我很难在React上添加动画,所以请给我一些建议。谢谢。
最佳答案
您应该在Apptop中具有ReactCSSTransitionGroup,因为即它将显示或不显示的点。在AppConfig中制作它不会有任何动画,因为它将把它渲染为一个直线组件。
import React from 'react';
import ReactDOM from 'react-dom';
import AppConfig from './AppConfig';
export default class AppTop extends React.Component {
constructor(props) {
super(props);
this.state = { openConfig: false };
}
toggleConfig() {
this.setState({ openConfig: !this.state.openConfig });
}
render() {
// only shows up openConfig is true
const domAppConfig = this.state.openConfig ? <AppConfig ... /> : '';
return (
<div>
... //some elements
<button onClick={this.toggleConfig.bind(this)}>Config</button>
<ReactCSSTransitionGroup
transitionName="anim-app-config"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
>
{domAppconfig}
</ReactCSSTransitionGroup>
</div>
);
}
}