ReactCSSTransitionGroup不工作

Question

我试着让一个元素消失，但它什么也没做。总体目标是在切换状态时显示元素(单击并触发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;
}

​

Answer 1

我为您制作了一个小提琴，并给出了一个工作示例。ReactCSSTransitionGroup不基于css可见性属性触发动画。它会触发动画，如果它的孩子正在被渲染或没有。

您应该做的主要更改：

• showOptions()应该切换状态的布尔属性，而不是类名字符串。根本没有必要搞砸className。
• 基于此布尔属性，进行简单的三元验证，以呈现子元素。

可以这样实现showOptions：

showOptions() {
  this.setState({isVisible: !this.state.isVisible})
}

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>