ReactJS onClick ReactCSSTransitionGroup Animation

Question

Ich bin neu zu reagieren und reagieren Animationen. Also mit "Erscheinen" Animationen beim Laden der Seite funktioniert alles. Aber jetzt habe ich ein Problem. Wenn ich auf das nav klicke, möchte ich, dass das neue div nicht nur sofort angezeigt wird, sondern langsam eingeblendet wird (oder irgendeine andere Animation für diesen Mather), aber es funktioniert nicht.

TLDR; Mit dem onClick-Ereignis wird die gerade festgelegte Animation nicht zu einer neuen Klasse.

Auch vielleicht jemand weiß, wie ReactCSSTransitionGroup nur funktionieren, wenn ich auf einen bestimmten Teil der Website scrool? Danke!

import React from "react"; 
import ReactDOM from "react-dom"; 
import ReactCSSTransitionGroup from "react-addons-css-transition-group"; 

export default class Nav extends React.Component { 
constructor() { 
    super(); 
    this.state = { 
     navStatus: "navHide" 
    }; 
} 

navClose(e) { 
    e.stopPropagation(); 
    this.setState({ 
     navStatus: "navHide", 
     navLines: "navLines show" 
    }); 
} 

navOpen() { 
    this.setState({ 
     navStatus: "navShow", 
     navLines: "navLines hide" 
    }); 
} 


render() { 
    return(
     <nav> 
      <div className={this.state.navLines} onClick={this.navOpen.bind(this)}> 
      </div> 
      <ReactCSSTransitionGroup transitionName="navShow" transitionAppear={true} transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
      <div id="myNav" className={this.state.navStatus}> 
       <div className="navClose" onClick={this.navClose.bind(this)}> 
        <img className="navCloseBtn" src="svg/close.svg"></img> 
       </div> 
      </div> 
     </ReactCSSTransitionGroup> 
     </nav> 
    ); 
} 

}

Answer 1

Ich würde den Status der CSS-Klasse entfernen. Es ist am besten, css-Selektoren von Ihrem React-Komponentenstatus zu entkoppeln. Es gibt eine bessere Möglichkeit, zustandsorientierte css-Selektoren zu verwalten

Tun Sie etwas in dieser Richtung. Es ist ein übliches Muster, das ich in meinen FE-, React-Codebasen für mehrere Projekte verwendet habe. Es ist einfach zu verwalten und verwendet reines JS zur Verwaltung der Erstellung des BEM-Selektors.

render() { 
    const { isOpen } = this.state; 

    const classnames = [ 
    'nav', 
    isOpen && 'nav--open' 
    ].filter(Boolean); 

    return (
    <nav className={classnames.join(' ')}> 
     ... 
    </nav> 
); 
} 

Lassen Sie uns nun über ReactCSSTransitionGroup sprechen. Verwenden Sie dieses Add-on, wenn Sie versuchen, Animationen hinzuzufügen, die in DOM-Elementen eingehängt oder aus der DOM-Struktur entfernt wurden. Wenn das Element den DOM-Baum nicht verlässt, wird die Bearbeitung Ihrer Animationen mit CSS-Selektoren wie das obige Code-Snippet dynamisch angewendet.

Verwenden Sie ReactCSSTransitionGroups nicht nur, wenn Sie etwas in React animieren müssen; Das ist übertrieben.

Legen Sie eine Übergangseigenschaft für den übergeordneten Selektor fest, an dem Sie animieren möchten. So etwas wie dies ...

.nav { 
    ... 
    opacity: 0; 
    transition: opacity 1s ease-in-out; 
} 

nun die folgende CSS an die dynamisch angewendet CSS-Selektoren (d.h. Zustand abgeleitetes CSS-Selektoren) hinzuzufügen.

.nav--open { 
    opacity: 1; 
} 

Hier ist ein link to a simple, Vanilla JS example von dem, was die Anwendung CSS-Selektoren für Ihre Animationen tun.

Hier ist eine link to an example mit React und grundlegende CSS-Übergänge.

Hier ist ein mit React und CSSTransitionGroup, wo das DOM-Element aus dem DOM montiert und demontiert.

Hoffe, das hilft!

Answer 2

Sie Kind von ReactCSSTransitionGroup im onClick-Handler entfernen sollte. So etwas sollte funktionieren:

navClose(e) { 
    this.setState({visible: false}); 
}, 

navOpen(e) { 
    this.setState({visible: true}); 
} 


render() { 
    return(
     <nav> 
     <div className={this.state.navLines} onClick={this.navOpen.bind(this)}> 
     </div> 
     <ReactCSSTransitionGroup transitionName="navShow" transitionAppear={true} transitionEnterTimeout={500} transitionLeaveTimeout={300}> 
     { this.state.visible && 
      <div id="myNav" className={this.state.navStatus}> 
      <div className="navClose" onClick={this.navClose.bind(this)}> 
       <img className="navCloseBtn" src="svg/close.svg"></img> 
      </div> 
      </div> 
     } 
     </ReactCSSTransitionGroup> 
    </nav> 
); 
}