如何在相同的功能中設置兩次樣式並作出反應？

Question

我希望用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 
     } 

我想首先設置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

重新呈現DOM中你有兩種選擇：

1）通過設置狀態使用的setState。

2）通過使用生命週期函數是forceUpdate（）

但你有因爲它停止等操作使用forceupdate功能之前，照顧和調用渲染功能，採用的setState建議。

在此，你可以做一兩件事：

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

    }