Question

我希望使用css-transition为对象设置动画：

<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函数之前必须小心，因为它会停止其他操作并调用render函数，建议使用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'}
      )}
     }

  }

如何使用react在相同的函数中设置两次样式？

1 个答案: