ReactCSSTransitionGroup funktioniert nicht

Question

Ich versuche, ein Element einzublenden, aber es tut überhaupt nichts. Das Gesamtziel ist, das Element zu zeigen, wenn ich den Zustand (durch Anklicken und Auslöser showOptions())

Ich kann nicht scheinen, irgendwelche der Animation funktioniert überhaupt, mit oder ohne diese 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 { 
 
\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)

und hier ist die 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

ich für Sie ein fiddle mit Arbeitsbeispiel gemacht haben. ReactCSSTransitionGroup löst keine Animation basierend auf CSS-Sichtbarkeitseigenschaften aus. Es löst eine Animation aus, wenn das Kind gerendert wird oder nicht.

Wichtigste Änderungen sollten Sie machen:

• showOptions() sollte ein boolean Eigentum des Staates wechseln, nicht einen Klassennamen Zeichenfolge. Keine Notwendigkeit, mit className überhaupt zu vermasseln.
• Base auf dieser boolesche Eigenschaft, eine einfache ternär Überprüfung machen, für Kind-Rendering-Elemente

showOptions wie diese umgesetzt werden könnten:

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

Und ReactCSSTransitionGroup Komponente sollte wie folgt aussehen