Réagir animer élément lors de modifications de la propriété?

Comment fondu dans un élément lors de la modification d'une propriété ?

J'aimerais l'élément renvoyé par la statusMessage() fonction de fondu à chaque fois que le this.props.statusMessage changements.

Actuellement pas d'animations sont appliquées. Il ne semble pas comme si tout les noms de classe sont ajoutés.

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

4

J'ai eu un problème similaire il y a quelques semaines. Le problème est que le ReactCSSTransitionGroup doit être rendu avant les enfants. Dans votre exemple, les deux ReactCSSTransitionGroup et this.props.statusMessage.text sera rendu dans le même temps, lorsque this.props.selectedPlayerName === true.

J'ai trouvé cet article qui pourrait être utile: ici

Récemment lors de l'utilisation du ReactCSSTransitionGroup add-on pour React.js, j'ai couru dans la question de ne pas être en mesure d'appliquer l'entrée des transitions à l'enfant des éléments le composant est rendu pour la première fois vers les DOM.

Lorsque le composant est d'abord rendu, à la fois la
ReactCSSTransitionGroup et tous ses éléments enfants apparaissent dans le
DOM en même temps. Cependant, la ReactCSSTransitionGroup ne
les classes d'animation à tout enfant, les éléments qui
entrez le DOM après la première de rendre.
- ok, donc je ne suis pas fou, je me sens mieux, merci! Cela semble comme il se doit waaay plus facile qu'il ne l'est. Mais, je suis tout nouveau à Réagir, donc je vais lire l'article et voir sur un correctif.
InformationsquelleAutor Geraint

Cela pourrait être plus facile avec réagir-animer-sur-changement (avertissement, je suis l'auteur).

De rendu que vous feriez quelque chose comme ceci:

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

Et ensuite utiliser l'animation dans votre CSS:

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

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

Il est difficile d'imaginer comment vous voulez. Mais pour les sons de celui-ci, vous avez une liste de joueurs qui peut être cliqué et une vue de certains joueurs? Dans ce cas, vous devriez plutôt utiliser un tableau avec une sélection de joueurs et de l'utilisation ReactCSSTransitionGroup pour rendre les joueurs qui rentre dans le tableau.

hey @arve0 que faire si je veux que l'animation se produire lorsque le src attribut de l'image est modifiée?
Dépend de la façon dont src est changé. Par DOM? Via un accessoire? Consultez la documentation sur animer-sur-changement. Si quelque chose n'est pas clair, veuillez ouvrir avec un code pour reproduire votre problème.

InformationsquelleAutor arve0

6

La documentation officielle indique que vous devez fournir un pour chaque élément à l'intérieur d'ReactCSSTransitionGroup

Réagir utilise cette pour la manipulation du DOM. Il doit donc être unique. Aussi à partir de mon expérience, vous devez avoir transitionAppear et transitionEnter configurés de la même manière, de sorte que la formation initiale de l'animation et de l'animation pour le changement semble le même.

De sorte que vous devez fournir certaines clés uniques (ou au moins différents entre l'état actuel (ou accessoires) et à côté de l'état (ou accessoires) de l'élément enfant pour chaque modification) pour les ReactCSSTransitionGroup
```
<ReactCSSTransitionGroup transitionName="example"
                         transitionAppear={true}
                         transitionAppearTimeout={500}
                         transitionLeaveTimeout={500}
                         transitionEnterTimeout={500}>
    <h1 key={key}>Hello, {name}</h1>
<ReactCSSTransitionGroup>
```
Vous pouvez consulter JSFIDDLE pour voir comment il fonctionne.

AVIS que j'ai utilisé
{ce.état.nom} clé, de sorte qu'il fonctionne ok dans mon exemple. Mais dans une application réelle, je pense que vous devriez utiliser quelque chose d'autre comme l'un des principaux

InformationsquelleAutor Sim Dim

Vous devez vous connecter pour publier un commentaire.