Considere un caso de uso: un bloque con un texto dentro (el texto se obtiene de la tienda). Cuando cambia el texto, el bloque desaparece suavemente y aparece el otro bloque.
Pseudocódigo para una mejor ilustración:
import TransitionGroup from 'react-addons-transition-group' @connect((state) => ({text: state.text})) class Container extends React.Component { render() { return ( <div> <TransitionGroup> <Block key={this.props.text}/> // change block when text changes </TransitionGroup> </div> ) } } @TransitionWrapper() // pass componentWillEnter through wrapper @connect((state) => ({text: state.text}), null, null, {withRef: true}) class Block extends React.Component { componentWillEnter(callback) { // fancy animations!!! const el = ReactDOM.findDOMNode(this); TweenMax.fromTo(el, 1, { alpha: 0, }, { alpha: 1, onComplete: callback }); } componentWillLeave (callback) { const el = ReactDOM.findDOMNode(this); TweenMax.to(el, 1, { alpha: 0, onComplete: callback }); } render() { return ( <div>{this.props.text}</div> ) } }¿Qué sucede cuando cambia state.text?
Block , porque se cambió key ; componentWillEnter inicia la animación para ello. Estupendo.componentWillLeave inicia la animación para él. El problema es el paso n.º 2: el elemento antiguo debe desaparecer con los datos antiguos, pero debido a que se vuelve a procesar, cambia su contenido a uno nuevo de la store , por lo que el usuario ve esto:
store.text = 'Foo' . El usuario ve un bloque con el texto 'Foo' en la pantalla.store.text = 'Bar' . El usuario ve dos Bloques, ambos con el texto 'Bar' en la pantalla. Un bloque está desapareciendo.Foo en la pantalla. Creo que usar transiciones es bastante común hoy en día y esto debería ser un problema común, pero me sorprendió no poder encontrar nada relacionado. La mejor idea que se me ocurre es "congelar" accesorios en el elemento cuando está a punto de irse (o pasar por la store anterior, por lo que se vuelve a renderizar con los datos anteriores), pero me parece raro.
¿Cuál es la mejor manera de resolver este problema?
Nos encontramos con el mismo problema con la tienda redux, ya que cuando se eliminaron los datos, los accesorios no contienen nada, por lo tanto, la interfaz de usuario no mostrará datos cuando se esté desmontando la animación.
Creo que es complicado usar la tienda o el estado anterior (romper la convención del ciclo de vida de React), puede usar el loading placeholder si no hay datos disponibles, como
if (!this.props.text){ return <EmptyPlaceholder /> } Además, la duración de la animación es pequeña, como 300 milisegundos, la experiencia del usuario no será mala.
Alternativamente , debe definir una variable de instancia de clase como:
componentWillMount(){ if(this.props.text){ this.text = this.prop.text; } }Luego renderiza el texto como
<Block key={this.props.text || this.text}/>Entonces, el texto anterior siempre estará allí cuando se desmonte la animación. Probé en mi proyecto, funcionó muy bien. Espero que te ayude, si no, no dudes en enviarme un mensaje.