Добавьте css в два этапа с реакцией?

Question

Общим случаем при выполнении css-переходов является то, что вам сначала нужно установить некоторые начальные значения, а затем перейти к другим значениям. В моем случае мне нужно изменить поле на абсолютное положение, а затем я хочу перевести его в полноэкранный режим. Это то, что я пробовал:

componentDidMount (props) { 
    this.flky = new Flickity('.carousel', flickityOptions) 

    this.flky.on('staticClick',() => { 
    this.setState({ zoom: 'transition' },() => { 
     this.setState({ zoom: 'full' }) 
    }) 
    }) 
} 

setStyle() { 
    const container = this.refs.container 
    if (this.state.zoom === 'transition') { 
    return { 
     position: 'absolute', 
     top: container.offsetTop + 'px', 
     left: container.offsetLeft + 'px', 
     width: container.offsetWidth + 'px', 
     height: container.offsetHeight + 'px', 
     transition: 'all .5s' 
    } 
    } else if (this.state.zoom === 'full') { 
    return { 
     background: 'white', 
     position: 'absolute', 
     top: 0, 
     left: 0, 
     width: '100%', 
     height: '100%', 
     transition: 'all .5s' 
    } 
    } 
} 

<div ref='container' style={this.setStyle()} /> 

Проблема, кажется, что первоначальный CSS не применяется до того, как вторичный применяется, так ДИВ идет прямо в полноэкранном режиме. Я пытаюсь достичь этого, используя обратный вызов setState, но он не работает.

Это связано с задержкой 0мс по какой-либо причине.

this.flky.on('staticClick',() => { 
    this.setState({ zoom: 'transition' },() => { 
    setTimeout(() => { 
     this.setState({ zoom: 'full' },() => { 
      this.flky.resize() 
     }, 0) 
    }) 
    }) 
}) 

Answer 1

Как только состояние установлено, вы затем перезаписываете его другим состоянием. Вместо того, чтобы устанавливать css в обратном вызове setState, вы захотите установить его, как только будет сделано первое.

Я бы просто использовал интерактивную библиотеку для анимации, если бы я был вами. React Motion имеет обратный вызов onRest, который вы бы использовали для этого.