ReactCSSTransitionGroup不起作用

问题描述

我正在尝试使某个元素淡入，但是它什么也没做。总体目标是在切换状态时显示元素（通过单击并触发 showOptions（））

I'm trying to make an element fade in but it doesn't do anything at all. The overall goal is to show the element when I switch the state (by clicking and trigger showOptions())

无论有没有单击处理程序，我似乎都无法使任何动画正常工作。

I can't seem to get any of the animation working at all though, with or without this click handler.

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;
}

推荐答案

我为您制作了。 ReactCSSTransitionGroup 不会基于CSS可见性属性触发动画。

I've made a fiddle with working example for you. ReactCSSTransitionGroup doesn't trigger animation based on css visibility properties. It triggers animation if it's child is being rendered or not.

您应进行的主要更改：

• showOptions（）应该切换状态的布尔属性，不是类名字符串。完全不需要弄乱 className 。


• 基于此布尔属性，进行简单的Ternar验证，以呈现子元素

• showOptions() should toggle a boolean property of the state, not a class name string. No need to mess up with className at all.
• Base on this boolean property, make a simple ternar verification, for rendering child elements

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不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！