CSS-Übergangsgruppe reagieren, funktioniert nicht?

Question

Apologies für die Einfachheit dieses Problem, aber ich bin neu zu reagieren und versuchen, eine einfache CSSTransitionGroup zu implementieren, ein Element zu verstecken/zeigen, aber mit einer Einblendung, Rutsche, usw. Die Dokumentation scheint sehr einfach, aber aus irgendeinem Grund die folgender Code wird bei mir nicht funktionieren.

Während die .box schaltet zwischen dort zu sein oder nicht, ich sehe keine der CSS-Übergänge an seinem Platz auf und geben Sie auf Urlaub.

class Demo extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = { visible: false }; 
     this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick() { 
     this.setState({ visible: ! this.state.visible }); 
    } 

    render() { 
     return <div> 
      <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button> 
      <ReactCSSTransitionGroup transitionName="example"> 
       { this.state.visible ? <div className='box' /> : null } 
      </ReactCSSTransitionGroup> 
     </div> 
    } 
} 

.box { 
    width: 200px; 
    height: 100px; 
    background: green; 
    margin-top: 10px; } 

.example-enter { 
    height: 0px; } 

.example-enter.example-enter-active { 
    height: 100px; 
    -webkit-transition: height .3s ease; } 

.example-leave.example-leave-active { 
    height: 0px; 
    -webkit-transition: height .3s ease; } 

Ich muss etwas falsch zu machen, da ich diese grundlegende Demo in anderen Online-Beispiele arbeiten sehen, aber kann mich nicht replizieren. Lass mich wissen, wie ich meine CSS-Übergänge bekommen kann.

Thx internet

Answer 1

Haben Sie die Konsole auf Fehlerausgabe überprüft? Denn wenn ich Ihren Code ausführen bekomme ich diese:

„Warning: Failed PropType: transitionEnterTimeout wurde nicht ReactCSSTransitionGroup geliefert: Dies kann unzuverlässig Animationen verursachen und nicht in einer zukünftigen Version von React unterstützt werden. Weitere Informationen finden Sie unter xxx Weitere Informationen finden Sie in der Render-Methode Demo. "

„Warnung: Fehler PropType: transitionLeaveTimeout nicht ReactCSSTransitionGroup geliefert wurde.. Diese unzuverlässig Animationen verursachen und nicht in einer zukünftigen Version von React finden Sie weitere Informationen xxx unterstützt werden Überprüfen des Putzes Methode von Demo. "

Hinzufügen der zwei fehlenden Requisiten und es funktioniert gut.

class Demo extends React.Component{ 
    constructor(props) { 
     super(props); 
     this.state = { visible: false }; 
     this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick() { 
     this.setState({ visible: ! this.state.visible }); 
    } 

    render() { 
     return <div> 
      <button onClick={this.handleClick}>{this.state.visible ? 'Slide up' : 'Slide down'}</button> 
      <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={300} transitionLeaveTimeout={300} > 
       { this.state.visible ? <div className='box' /> : null } 
      </ReactCSSTransitionGroup> 
     </div> 
    } 
} 

transitionEnterTimeout und transitionLeaveTimeout nehmen sowohl eine Zahl, die die Dauer des Übergangs in Millisekunden darstellt, also „300“ für einen 0,3 Sekunden Übergang, der die CSS-Übergänge entspricht, die Sie angegeben haben.