同じ機能で反応してスタイリングを2回設定するにはどうしたらいいですか？

Question

Iオブジェクトをアニメーション化するCSS遷移を使用したい：

<div style={this.setStyle()}> 

     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 
     } 

Iが最初style.top = 20pxを設定したい（アイテムが既にある場合、これは、その後、DOMをレンダリングし直し、その後トリガするstyle.top = 0を設定。アニメーションどのようにこれを行うことができます

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' 
     }) 
    } 

Answer 1

ドム次の2つのオプション持って再描画するには：？状態使用SETSTATEを設定することにより、

1）。 forceUpdateであるライフサイクル機能を使用して

2）は（）

しかし、あなたがSETSTATEを使用して、機能をレンダリング、それは他の操作を停止するためforceupdate機能を使用する前に、世話をして起動する必要が推奨されます。

constructor(props) 
{ 
    super(props) 
    this.state={ 
    style:{ 
     background = 'white', 
     position = 'absolute', 
     transition = 'top 2s', 
     top:'20px' 
    }   
    } 
} 


<div style={this.setStyle()}> 

    setStyle() { 
    //you can set state as follows 
    if (this.state.fullScreen) { 
    this.setState({ 
     style:{background: 'white'}, 
     style:{position:'absolute'}, 
     style:{transition: 'top 2s'}, 
     style:{top: '20px'} 
    )} 
    } 

    //here I wish to set style.top = 0 
    else 
    { 
     this.setState({ style:{background: 'white'}, 
     style:{position:'absolute'}, 
     style:{transition: 'top 2s'}, 
     style:{top: '0px'} 
    )} 
    } 

    }