Reagieren animate-element, wenn die Eigenschaft ändert?

Wie fade-in einem element, wenn sich eine Eigenschaft ändert ?

Ich würde gerne das element zurück durch die statusMessage() - Funktion, fade-in jeder Zeit der this.props.statusMessage änderungen.

Derzeit keine Animationen angewendet werden. Es scheint nicht, als ob alle Klassennamen Hinzugefügt werden.

class SelectPlayer extends React.Component {

  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    selectedId = this.props.selectedId;
    selectedPlayerName = this.props.selectedPlayerName;
    Store.dispatch(Actions.updateScore(selectedId, selectedPlayerName));
  }

  statusMessage() {
    return (
      <ReactCSSTransitionGroup
        transitionName='message'
        transitionAppear={true}
        transitionAppearTimeout={2000}
        transitionEnterTimeout={500}
        transitionLeaveTimeout={500}>
          <div key="1">{this.props.statusMessage.text}</div>
      </ReactCSSTransitionGroup>
    )
  }

  render() {
    if (this.props.selectedPlayerName) {
      return (
        <div className="details">
          <div className="name">{this.props.selectedPlayerName}</div>
          <button className="inc" onClick={this.handleClick}>
            Add 5 points
          </button>
          { this.statusMessage() }
        </div>
      );
    }
    else {
      return (
        <div className="message">Click a player to select</div>
      );
    }
  }
};

CSS

.message {
  line-height: 2.25rem;
  text-align: center;
}

.message-appear {
  opacity: 0.01;
}

.message-appear.message-appear-active{
  opacity: 1;
}

InformationsquelleAutor looshi | 2016-01-10

javascript reactjs

3

Ich hatte ein ähnliches Problem vor ein paar Wochen. Das Problem ist, dass die ReactCSSTransitionGroup muss gerendert werden, bevor es die Kinder. In deinem Beispiel beide ReactCSSTransitionGroup und this.props.statusMessage.text dargestellt wird, zur gleichen Zeit, wenn this.props.selectedPlayerName === true.

Ich fand diesen Artikel, die nützlich sein könnten: hier

Vor kurzem während der Verwendung der ReactCSSTransitionGroup add-on für React.js ich lief in das Problem, nicht in der Lage die geben Sie übergänge, um die child-Elemente, wenn die Komponente wird zunächst dargestellt, um den DOM.

Wenn die Komponente wird zunächst dargestellt, sowohl die
ReactCSSTransitionGroup und alle seine untergeordneten Elemente werden in den
DOM gleichzeitig. Jedoch, die ReactCSSTransitionGroup nur
die Anwendung der entsprechenden animation-Klassen für alle untergeordneten Elemente, die
geben Sie den DOM nach dem ersten Rendern.

ok, also ich bin nicht verrückt, ich fühle mich besser, danke! Dies scheint, wie es sein sollte waaay einfacher, als es ist. Aber, ich bin die neue zu Reagieren, so dass ich den Artikel zu Lesen und zu sehen über einen fix.

InformationsquelleAutor Geraint

Könnte dies einfacher sein, mit reagieren-animiert-auf-ändern (disclaimer, ich bin der Autor).

Render-würden Sie so etwas tun:

render() {
  if (this.props.selectedPlayerName) {
    return (
      <div className="details">
        <div className="name">{this.props.selectedPlayerName}</div>
        <button className="inc" onClick={this.handleClick}>
          Add 5 points
        </button>
        <AnimateOnChange 
          baseClassName="message" 
          animationClassName="message-clicked" 
          animate={this.props.selectedId === this.props.id}>
            {this.props.statusMessage.text}
        </AnimateOnChange>
      </div>
    );
  }
  else {
    return (
      <div className="message">Click a player to select</div>
    );
  }
}

Und verwenden Sie dann animation in CSS:

.message-clicked {
  animation: clicked-keyframes 1s;
}

@keyframes clicked-keyframes {
  from {opacity: 0.01}
  to {opacity: 1}
}

Ist es schwer vorstellbar, wie Sie wollen, das Ergebnis zu sein. Aber zu den Klängen der es, Sie haben eine Spieler-Liste, die angeklickt werden können und dann eine Ansicht der ausgewählten Spieler? In diesem Fall sollten Sie lieber ein array mit den ausgewählten Spieler und Verwendung ReactCSSTransitionGroup zu Rendern Spieler betreten/verlassen des array.

hey @arve0 was ist, wenn ich die animation dann passieren, wenn die src - Attribut eines Bildes geändert wird?
Hängt davon ab, wie src geändert wird. Über DOM? Über einen prop? Schauen Sie sich die Dokumentation auf animieren-on-change. Wenn etwas unklar ist, bitte öffnen Sie ein Thema mit code zum reproduzieren des Problems.

InformationsquelleAutor arve0

6

Die offizielle Dokumentation besagt, dass Sie brauchen, um eine wichtige für jedes element innerhalb ReactCSSTransitionGroup

Reagieren, verwendet die Schlüssel für die DOM-manipulation. So sollte es eindeutig sein. Auch aus meiner Erfahrung sollten Sie haben transitionAppear und transitionEnter identisch konfiguriert, so dass die anfängliche animation und animation für die änderung, sieht genauso aus.

So müssen Sie einige eindeutige Schlüssel (oder zumindest den Unterschied zwischen dem aktuellen Zustand (oder stützen) und nächsten Zustand (oder die stützen) der child-element für jede änderung) für die ReactCSSTransitionGroup
```
<ReactCSSTransitionGroup transitionName="example"
                         transitionAppear={true}
                         transitionAppearTimeout={500}
                         transitionLeaveTimeout={500}
                         transitionEnterTimeout={500}>
    <h1 key={key}>Hello, {name}</h1>
<ReactCSSTransitionGroup>
```
Können Sie aus JSFIDDLE zu sehen, wie es funktioniert.

HINWEIS, die ich verwendet habe
{dies.Zustand.name} wie einen Schlüssel, so funktioniert es in meinem Beispiel. Aber in einer realen Anwendung ich glaube, Sie sollten etwas anderes als ein Schlüssel

Ja, das ist die richtige Antwort. +1

InformationsquelleAutor Sim Dim

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.