我正在尝试实现ReactCSSTransitionGroup并遵循React网站上的示例。我正在使用React 0.14-rc1,由于某种原因,ReactCSSTransitionGroup组件似乎没有任何影响。我什至在控制台上都没有得到任何错误。我的代码:
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import Dropzone from 'react-dropzone';
import styles from './AddEventForm.css';
import withStyles from '../../../../../decorators/withStyles';
import Link from '../../../../../utils/Link';
import DateSelects from '../DateSelects';
import {StartDateSelect} from '../DateSelects';
import {EndDateSelect} from '../DateSelects';
import {EventTypeSelect} from '../DateSelects';
import ProfileStore from '../../../../../stores/ProfileStore';
import TimelineStore from '../../../../../stores/TimelineStore';
import TimelineDispatcher from '../../../../../dispatchers/TimelineDispatcher';
import TimelineActions from '../../../../../actions/TimelineActions';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
let getProfileState = () => {
return {
profile: ProfileStore.getProfile()
};
}
let getTimelineState = () => {
return {
timeline: TimelineStore.getEvents()
};
}
class AddEventForm extends React.Component {
_onChange() {
this.setState(getTimelineState());
}
constructor() {
super();
this.state = {};
this.state.files = [];
this.state.profile = getProfileState();
this.state.timeline = getTimelineState();
}
componentDidMount() {
TimelineStore.addChangeListener(this._onChange.bind(this));
}
componentWillUnmount() {
TimelineStore.removeChangeListener(this._onChange.bind(this));
}
onDrop(files) {
console.log('Received files: ', files);
this.setState({
files: files
});
}
render() {
return(
<ReactCSSTransitionGroup
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
transitionName="EventForm">
<form onSubmit={ TimelineActions.createEvent.bind(this) } id="addTimelineEventForm" className="AddTimelineEvent">
<a className="AddTimelineEventCloseButton" onClick={ TimelineActions.closeModal.bind(this) }>
<i className="fa fa-times"></i>
</a>
<h3>Add Event</h3>
<div className="AddEventTitle TimelineFormField">
<input ref="event_title"
className="TimelineInput" placeholder="Title" />
</div>
<div className="AddEventPlace TimelineFormField">
<input ref="event_place"
className="TimelineInput" placeholder="Place" />
</div>
<div className="AddEventLocation TimelineFormField">
<input ref="event_location"
className="TimelineInput" placeholder="Location" />
</div>
<div className="AddEventDescription TimelineFormField">
<textarea ref="event_description"
rows="2" className="TimelineInput" placeholder="Description"></textarea>
</div>
<StartDateSelect />
<EndDateSelect />
<EventTypeSelect />
<div className="AddEventMedia TimelineFormField">
<Dropzone className="Dropzone" activeClassName="DropzoneActive" ref="dropzone" multiple={true} disableClick={false} onDrop={this.onDrop.bind(this)}>
<div>Try dropping some files here, or click to select files to upload.</div>
{this.state.files.length > 0 ?
<div>
<div>{this.state.files.map((file) =>
<div className="DropzoneUploadedImageContainer">
<img className="DropzoneUploadedImage" key={file.preview} src={file.preview} />
<br className="clear" />
</div> )}
</div>
<p className="DropzoneFileCount">{this.state.files.length} files</p>
</div> : null}
</Dropzone>
<p className="AddTimelineEventNote">Note: Images only, maximum 4 images and maximum file size is 2 MB</p>
<button type="submit" form="addTimelineEventForm" className="SaveEventButton btn btn-primary">Save</button>
<a onClick={ TimelineActions.closeModal.bind(this) } className="SaveEventButton btn btn-default">Cancel</a>
</div>
</form>
</ReactCSSTransitionGroup>
);
}
}
export default AddEventForm;
CSS:
@keyframes scaleUp {
from {
opacity: 0;
transform:scale(0.2);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes scaleDown {
from {
opacity: 1;
transform:scale(1);
}
to {
opacity: 0;
transform:scale(0);
}
}
.EventForm-enter {
opacity: 0.01;
}
.EventForm-appear {
opacity: 0.01;
transition: scaleUp .5s ease-in;
}
.EventForm-enter.EventForm-enter-active {
opacity: 1;
transform:scale(1);
}
.EventForm-leave {
opacity: 0;
transition: scaleDown .5s ease-in;
}
知道是什么原因造成的吗?
最佳答案
official react docs on CSS transitions解释说,最初安装时,过渡组内的组件不会显示动画。-enter
和enter-active
类仅在更新后添加项目时适用。谷状态更改,或通过重新渲染父组件。
如果要在初始安装时制作动画,则应将transitionAppear={true}
添加到ReactCSSTransitionGroup组件中。相应的CSS类是AddTimeLineEvent-appear
和AddTimeLineEvent-appear-active
。
希望可以解决它。
顺便说一句:如果您只想在初始安装时播放动画,则可以在componentDidMount()上添加一个函数:
this.refs.getDOMNode('myRef').classList.add("active");
并在表单中添加
ref="myRef"
以启动动画。然后,您不需要反应CSS过渡。关于javascript - 使用ReactCSSTransitionGroup遇到麻烦,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32920524/