ReactCSSTransitionGroup not working

Question

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)

and here is the 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

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.

Main changes you should make:

• 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 could be implemented like this:

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

And ReactCSSTransitionGroup component should look like:

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