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

我为您做了一个fiddle的工作示例。 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>

ReactCSSTransitionGroup无法正常工作

1 个答案: