How can I set styling twice in the same functions with react?
<p>I wish to use css-transition to animate an object:</p>

<pre><code>&lt;div style={this.setStyle()}&gt;

      setStyle () {
        const style = {}
        if (this.state.fullScreen) {
          style.background = 'white'
          style.position = 'absolute'
          style.transition = 'top 2s'
          style.top = '20px'
        }

        //here I wish to set style.top = 0
        return style
      }
</code></pre>

<p>I wish to first set the <code>style.top = 20px</code> (this is where the item is already  and then re render the dom and then set the <code>style.top = 0</code> to trigger the animation. How can this be done?</p>

<pre><code>state declaration:

 constructor (props) {
    super(props)
    this.state = {
      active: -1,
      fullScreen: false,
      fullScreenStyle: {
        background: 'transparent',
        position: 'static',
        top: 'auto'
      }
    }
    this.flky = {}
  }

  setStyle () {
    if (this.state.fullScreen) {
      this.setState({
        fullScreenStyle.background: 'white,
        fullScreenStyle.position: 'absolute'
        fullScreenStyle.top: '20px'
      })
    }
</code></pre>