我试图让一个元素淡入，但它根本没有做任何事情。总体目标是在切换状态时显示元素（通过单击并触发showOptions())
不管有没有这个点击处理程序，我似乎都无法让任何动画正常工作。
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { switchOption } from '../actions/index';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
class PropertyColumn extends Component {
constructor(props) {
super(props);
this.state = {className: 'hidden'};
}
render() {
var activeOption = null;
this.props.options.forEach(function(option) {
if (option.active) {
activeOption = option;
}
});
return (
<div>
<img src={activeOption.image_url} />
<h2>{activeOption.name}</h2>
<p>{activeOption.description}</p>
<a onClick={() => this.showOptions()} href='#' className={"btn btn-primary"}>Change</a>
<ReactCSSTransitionGroup
transitionName="example"
className= {this.state.className}
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
component='ul'>
{this.listOptions()}
</ReactCSSTransitionGroup>
</div>
)
}
listOptions() {
return this.props.options.map((option, i) => {
return (
<li onClick={() => this.props.switchOption(this.props.data, this.props.columnId, i)} key={option.id}>{option.name}</li>
)
})
}
showOptions() {
if (this.state.className == 'visible') {
this.setState({className: 'hidden'})
} else {
this.setState({className: 'visible'})
}
}
}
function mapStateToProps(state) {
return {
data: state.data
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators({ switchOption }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(PropertyColumn)
这是CSS
.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}
我做了一个fiddle https://jsfiddle.net/2y6vqvp4/7/为您提供工作示例。ReactCSSTransitionGroup不会触发基于 CSS 可见性属性的动画。如果它的子项正在渲染或未渲染，它就会触发动画。
您应该进行的主要更改：
-
showOptions()应该切换状态的布尔属性，不是类名字符串。没必要去搞乱className根本不。
- 基于这个布尔属性，进行简单的三元验证，用于渲染子元素
showOptions可以这样实现：
showOptions() {
this.setState({isVisible: !this.state.isVisible})
}
And ReactCSSTransitionGroup组件应该如下所示：
<div>
<a onClick={() => this.showOptions()} href='#' className={"btn btn-primary"}>Change</a>
<ReactCSSTransitionGroup
transitionName="example"
transitionEnterTimeout={300}
transitionLeaveTimeout={300}
component='div'>
{this.state.isVisible ? ( <ul className={this.state.className}>{this.listOptions()}</ul>) : null}
</ReactCSSTransitionGroup>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
