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 { 
 
\t constructor(props) { 
 
\t \t super(props); 
 

 
\t \t this.state = {className: 'hidden'}; 
 
\t } 
 

 
\t render() { 
 
\t \t var activeOption = null; 
 

 
\t \t this.props.options.forEach(function(option) { 
 
\t \t \t if (option.active) { 
 
\t \t \t \t activeOption = option; 
 
\t \t \t } 
 
\t \t }); 
 

 
\t \t return (
 
\t \t \t <div> 
 
\t \t \t \t <img src={activeOption.image_url} /> 
 
\t \t \t \t <h2>{activeOption.name}</h2> 
 
\t \t \t \t <p>{activeOption.description}</p> 
 
\t \t \t \t <a onClick={() => this.showOptions()} href='#' className={"btn btn-primary"}>Change</a> 
 

 
\t \t \t \t <ReactCSSTransitionGroup 
 
\t    \t transitionName="example" 
 
\t    \t className= {this.state.className} 
 
\t    \t transitionEnterTimeout={300} 
 
\t    \t transitionLeaveTimeout={300} 
 
\t    \t component='ul'> 
 
\t \t \t \t \t {this.listOptions()} 
 
\t \t \t \t </ReactCSSTransitionGroup> 
 
\t \t \t </div> 
 
\t \t) 
 
\t } 
 

 
\t listOptions() { 
 
\t \t return this.props.options.map((option, i) => { 
 
\t \t \t return (
 
\t \t \t \t <li onClick={() => this.props.switchOption(this.props.data, this.props.columnId, i)} key={option.id}>{option.name}</li> 
 
\t \t \t) 
 
\t \t }) 
 
\t } 
 

 
\t showOptions() { 
 
\t \t if (this.state.className == 'visible') { 
 
\t \t \t this.setState({className: 'hidden'}) 
 
\t \t } else { 
 
\t \t \t this.setState({className: 'visible'}) 
 
\t \t } 
 
\t } 
 
} 
 

 
function mapStateToProps(state) { 
 
\t return { 
 
\t \t data: state.data 
 
\t } 
 
} 
 

 
function mapDispatchToProps(dispatch) { 
 
\t return bindActionCreators({ switchOption }, dispatch); 
 
} 
 

 
export default connect(mapStateToProps, mapDispatchToProps)(PropertyColumn)

、ここで私はあなたのための作業例でfiddleを作った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は次のように実装される可能性があるため、簡単なternar検証を行います。

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

：

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

そしてReactCSSTransitionGroupコンポーネントは次のようになります。