ReactJS: Toggle class für css-übergang

Muss ich Umschalten auf eine css-Klasse nachdem eine Komponente (oder sogar die Seite) ist vollständig dargestellt, so dass relevante Eigenschaften animiert werden, die beim laden der Seite.

Wie gehe ich vor, dies zu tun, vorzugsweise ohne jQuery?

Wenn ich Umschalten eine Komponente, Klasse componentDidMount die animation eigentlich nicht passieren.

Bitte geben Sie eine minimale Beispiel oder ein Stück code, damit wir eine bessere Antwort, eine hilfreiche Ressource in der Zukunft...
.toggleClass? api.jquery.com/toggleclass
Was ist die Frage ?
Oops, vergaß zu erwähnen, dass ich mit reagieren!
fyi werfen Sie einen Blick in die ReactCSSTransitionGroup, könnte nützlich sein, facebook.github.io/react/docs/animation.html

InformationsquelleAutor eye_mew | 2014-11-13

  1. 15

    Ich habe tatsächlich die Rolle bekommen, wo Sie sagen:

    nachdem eine Komponente (oder sogar die Seite) ist vollständig dargestellt, so dass
    die relevanten Eigenschaften animiert werden, die beim laden der Seite.

    Wann genau möchten Sie animieren, das element ? Wenn Sie den Klassennamen in der render () - Funktion die Komponente gerendert wird mit animation beim laden der Seite.

    Wenn Sie möchten, zu Steuern/Umschalten der animation, nach dem ersten Rendern, können Sie die Klasse name mit Komponente Zustand etwa so:

    var Hello = React.createClass({

    getInitialState: function(){
        return {
            condition:false
        }
    },

    handleClick :function(){
        this.setState( { condition : !this.state.condition } );
    },

    render: function() {
        return <div>
                <div className={this.state.condition ? "animated" :""}  >Hello {this.props.name}</div>
                <button type="button" onClick={this.handleClick}>Change Condition</button>

               </div>;
    }
});

React.render(<Hello name="World" />, document.body);

    Hier habe ich geändert, der Zustand, in Reaktion auf das klicken auf eine Schaltfläche. Sie können wahrscheinlich wollen Sie dies ändern, um eine andere Veranstaltung, die Sie möchten.

    Hier ist ein Turnschuh für den obigen code : http://jsfiddle.net/f0j4kt0L/

    Also, was ich will zu tun ist, laden Sie die animation sofort nachdem die Seite geladen wurde. Ich habe versucht, genau das, was du vorgeschlagen hast, sondern das ändern der this.state.condition im componentDidMount Methode. Die css-Klasse wird angewandt in einem solchen Fall sofort, ohne übergang.
    Was passiert, wenn Sie ändern Sie diese Zeile: '<div className="animierte">Hello {dies.Requisiten.name}</div>' ? Nicht nur die Arbeit beim laden der Seite: jsfiddle.net/3fmfous3 ?
    das war eine super hilfreich demonstration. wirklich geklärt ist es für mich.

    InformationsquelleAutor nilgun

  2. 1

    Kann man es mit toggle-Klasse als auch.

    var node = ReactDOM.findDOMNode(this.refs.el);
node.classList.toggle('menu-open');
    Ich würde sagen, dass diese nicht reagieren, so tun Sie Sachen.

    InformationsquelleAutor rajesh_kw

Schreibe einen Kommentar