Come utilizzare React TransitionMotion willEnter()

Question

Utilizzando React Motion's TransitionMotion, desidero animare 1 o più caselle in entrata e in uscita. Quando una finestra entra nella vista, la sua larghezza e altezza dovrebbero passare da 0 pixel a 200 pixel e la sua opacità dovrebbe andare da 0 a 1. Quando la finestra lascia la vista, dovrebbe accadere il contrario (larghezza/altezza = 0, opacità = 0)

Ho provato a risolvere questo problema qui http://codepen.io/danijel/pen/RaboxO ma il mio codice non è in grado di passare correttamente la casella. Lo stile della casella salta immediatamente a una larghezza/altezza di 200 pixel invece di effettuare la transizione.

Cosa c'è di sbagliato nel codice?

let Motion = ReactMotion.Motion 
let TransitionMotion = ReactMotion.TransitionMotion 
let spring = ReactMotion.spring 
let presets = ReactMotion.presets 

const Demo = React.createClass({ 
    getInitialState() { 
    return { 
     items: [] 
    } 
    }, 
    componentDidMount() { 

    let ctr = 0 

    setInterval(() => { 
     ctr++ 
     console.log(ctr) 
     if (ctr % 2 == 0) { 
     this.setState({ 
      items: [{key: 'b', width: 200, height: 200, opacity: 1}], // fade box in 
     }); 
     } else { 
     this.setState({ 
      items: [], // fade box out 
     }); 
     } 

    }, 1000) 
    }, 
    willLeave() { 
    // triggered when c's gone. Keeping c until its width/height reach 0. 
    return {width: spring(0), height: spring(0), opacity: spring(0)}; 
    }, 

    willEnter() { 
    return {width: 0, height: 0, opacity: 1}; 
    }, 

    render() { 
    return (
     <TransitionMotion 
     willEnter={this.willEnter} 
     willLeave={this.willLeave} 
     defaultStyles={this.state.items.map(item => ({ 
      key: item.key, 
      style: { 
      width: 0, 
      height: 0, 
      opacity: 0 
      }, 
     }))} 
     styles={this.state.items.map(item => ({ 
      key: item.key, 
      style: { 
      width: item.width, 
      height: item.height, 
      opacity: item.opacity 
      }, 
     }))} 
     > 
     {interpolatedStyles => 
      <div> 
      {interpolatedStyles.map(config => { 
       return <div key={config.key} style={{...config.style, backgroundColor: 'yellow'}}> 
       <div className="label">{config.style.width}</div> 
       </div> 
      })} 
      </div> 
     } 
     </TransitionMotion> 
    ); 
    }, 
}); 

ReactDOM.render(<Demo />, document.getElementById('app')); 

Answer 1

Come per la documentation del styles nella sezione TransitionMotion (e non sostengo di aver compreso tutto interamente :)):

stili: ... un array di TransitionStyle ...

La cosa fondamentale da notare qui è che ci sono 2 tipi di stile oggetti che questa libreria si occupa di (o almeno di questa parte di TransitionMotion) e li chiama TransitionStyle e TransitionPlainStyle.

I precedenti valori passati nell'attributo styles erano di TransitionPlainStyle. Modificandoli su TransitionStylemagicamente inizia l'animazione della sequenza Enter.

È possibile leggere ulteriori informazioni su 2 diversi tipi sopra menzionati su here.

styles={this.state.items.map(item => ({ 
    key: item.key, 
    style: { 
    width: spring(item.width), 
    height: spring(item.height), 
    opacity: spring(item.opacity) 
    } 
}))} 

Forked codepen demo.

Ancora una volta, non ne comprendo ancora pienamente il funzionamento interno. So solo che il tuo styles ha dovuto essere modificato nel modo sopra per farlo funzionare.

Sarò felice se qualcuno mi può educare anche su questo.

Spero che questo aiuti.