Reagisce l'elemento animato quando la proprietà cambia?

Question

Come svanire in un elemento quando una proprietà cambia?

Mi piacerebbe che l'elemento restituito dalla funzione statusMessage() sbiadisse ogni volta che le modifiche di this.props.statusMessage.

Attualmente non vengono applicate animazioni. Non sembra che vengano aggiunti anche nomi di classi.

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

Answer 1

ho avuto un problema simile a poche settimane fa. Il problema è che il ReactCSSTransitionGroup deve essere sottoposto a rendering prima che siano bambini. Nell'esempio, sia ReactCSSTransitionGroup sia this.props.statusMessage.text verranno visualizzati contemporaneamente a this.props.selectedPlayerName === true.

Ho trovato questo articolo che potrebbe essere utile: here

Recentemente durante l'uso del ReactCSSTransitionGroup add-on per React.js, mi sono imbattuto nel problema di non essere in grado di applicare le transizioni entrare al bambino elementi quando il componente viene prima sottoposto al DOM.

Quando il componente viene inizialmente sottoposto a rendering, sia il gruppo ReactCSSTransitionGroup sia tutti i relativi elementi figlio vengono visualizzati contemporaneamente nel DOM . Tuttavia, ReactCSSTransitionGroup applicherà solo le classi di animazione appropriate a qualsiasi elemento figlio che immette nel DOM dopo il rendering iniziale.

Answer 2

Questo potrebbe essere più semplice con react-animate-on-change (dichiarazione di non responsabilità, sono l'autore).

In rendere si farebbe qualcosa di simile:

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

e quindi utilizzare l'animazione nel CSS:

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

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

E 'difficile immaginare come si desidera che il risultato sia. Ma a quanto sembra, hai una lista giocatori che può essere cliccata e quindi una vista dei giocatori selezionati? In tal caso, dovresti utilizzare una matrice con giocatori selezionati e utilizzare ReactCSSTransitionGroup per rendere i giocatori che entrano/escono dalla matrice.

Answer 3

La documentazione ufficiale afferma che è necessario fornire una chiave per ogni elemento all'interno ReactCSSTransitionGroup

Reagire utilizza questa chiave per la manipolazione del DOM. Quindi dovrebbe essere unico. Inoltre, dalla mia esperienza dovresti avere transitionAppear e transitionEnter configurati allo stesso modo, in modo che l'animazione iniziale e l'animazione per la modifica abbiano lo stesso aspetto.

quindi è necessario fornire alcune chiavi uniche (o almeno diversa tra stato corrente (o oggetti di scena) e stato successivo (o oggetti di scena) dell'elemento bambino per ogni cambio) per la ReactCSSTransitionGroup

<ReactCSSTransitionGroup transitionName="example" 
         transitionAppear={true} 
         transitionAppearTimeout={500} 
         transitionLeaveTimeout={500} 
         transitionEnterTimeout={500}> 
    <h1 key={key}>Hello, {name}</h1> 
<ReactCSSTransitionGroup> 

È puoi controllare JSFIDDLE per vedere come funziona.

AVVISO che ho usato {this.state.name} come chiave, quindi funziona bene nel mio esempio. Ma in un mondo reale applicazione Credo che si dovrebbe usare qualcosa di diverso come chiave