如何在相同的功能中设置两次样式并作出反应？

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

    }