Come specificare l'ordine degli articoli in ReactCSSTransitionGroup?

Question

È possibile specificare l'ordine degli articoli in un ReactCSSTransitionGroup?

Considera un elenco di articoli il cui ordine è importante. Se vuoi mostrare un elemento e nascondere il suo adiacente con un'azione, ReactCSSTransitionGroup confonde il loro ordine. Date un'occhiata al seguente violino, gli articoli dovrebbero essere [1, 2, 3, 4, 5].

http://jsfiddle.net/mehranziadloo/kb3gN/15519/

E 'possibile dire ReactCSSTransitionGroup (o ReactTransitionGroup) la sequenza di elementi?

Answer 1

Il gruppo ReactCSSTransition anima solo le modifiche in DOM, non interessa l'ordine. Il tuo stato cambia da numeri dispari a pari, non c'è momento in cui contiene array ordinati con tutti i numeri. È possibile lavorare intorno ad esso, modificando lo stato in modo diverso, il risparmio temporaneo vecchi oggetti per scopi di animazione, qualcosa del genere:

switch: function() { 
    var newItems; 
    if (this.state.items[0] % 2 !== 1) { 
    newItems = [1, 3, 5]; 
    } 
    else { 
    newItems = [2, 4]; 
    } 
    this.setState({ 
    items: newItems, 
    previousItems: this.state.items 
    }, function() { 
    this.setState({ 
     previousItems: [] 
    }) 
    }); 
} 

Dopo di che, è necessario modificare il metodo Render:

render: function() { 
    var currentItems = this.state.items.concat(this.state.previousItems).sort(); 
    var items = currentItems.map(function(item, i) { 
    return (
     <div key={item}> 
     {item} 
     </div> 
    ); 
    }.bind(this)); 
    return (
    <div> 
     <button onClick={this.switch}>Switch</button> 
     <ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}> 
     {items} 
     </ReactCSSTransitionGroup> 
    </div> 
); 
} 

Qui è un violino aggiornato: http://jsfiddle.net/ny5La5ky/