我正在尝试实现 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"
添加到表单中以启动动画。那么你就不需要 React CSS 转换了。
关于javascript - 使用 ReactCSSTransitionGroup 时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32920524/