Javascript 如何在React中同时设置显示：块和过渡不透明度？

我在JSX中定义了一个背景层元素，它最初设置了

display:none

：

<div id="naviBG" style={naviBGStyleClone} role="button" onClick={this.onCloseClicked} />

单击时，我希望层使用css中定义的转换平滑地消失或重新出现。在

render（）

render（）

但这在react中不起作用，因为它会导致在
render（）
完成后修改样式

那么，在React中正确的方法是什么呢？
因为转换不会触发通过
display:none
隐藏的项目，所以您可以连续调用
setState
两次，一次触发显示更改，然后再次触发不透明度更改，并以相反的顺序使其淡出然后隐藏

class App extends React.Component {
  state = { display: 'none', opacity: 0 }

  toggle = () => {
    if (this.state.display === 'none') {
      this.setState({ display: 'block' })
      setTimeout(() =>
        this.setState({ opacity: 1 }), 10 // something very short
      )
    }
    if (this.state.display === 'block') {
      this.setState({ opacity: 0 })
      setTimeout(() =>
        this.setState({ display: 'none' }), 300 // same as transition time
      )
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.toggle}>toggle</button>        
        <div 
          style={{ 
            transition: 'opacity 0.3s ease',
            opacity: this.state.opacity,
            display: this.state.display
          }} 
        />
      </div>
    )
  }
}

类应用程序扩展了React.Component{
状态={显示：“无”，不透明度：0}
切换=（）=>{
如果（this.state.display=='none'）{
this.setState（{display:'block'}）
设置超时（（）=>
this.setState（{opacity:1}），10//非常短的内容
)
}
if（this.state.display==='block'）{
this.setState（{opacity:0}）
设置超时（（）=>
this.setState（{display:'none'}），300//与转换时间相同
)
}
}
render（）{
返回(
切换
)
}
}


我还鼓励您研究React Motion以处理更复杂的过渡，就像您处理
requestAnimationFrame

由于通过
显示：无
隐藏的项目不会触发转换，因此您可以连续调用
设置状态
两次，一次触发显示更改，然后再次触发不透明度更改，并按相反顺序将其淡出然后隐藏

class App extends React.Component {
  state = { display: 'none', opacity: 0 }

  toggle = () => {
    if (this.state.display === 'none') {
      this.setState({ display: 'block' })
      setTimeout(() =>
        this.setState({ opacity: 1 }), 10 // something very short
      )
    }
    if (this.state.display === 'block') {
      this.setState({ opacity: 0 })
      setTimeout(() =>
        this.setState({ display: 'none' }), 300 // same as transition time
      )
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.toggle}>toggle</button>        
        <div 
          style={{ 
            transition: 'opacity 0.3s ease',
            opacity: this.state.opacity,
            display: this.state.display
          }} 
        />
      </div>
    )
  }
}

类应用程序扩展了React.Component{
状态={显示：“无”，不透明度：0}
切换=（）=>{
如果（this.state.display=='none'）{
this.setState（{display:'block'}）
设置超时（（）=>
this.setState（{opacity:1}），10//非常短的内容
)
}
if（this.state.display==='block'）{
this.setState（{opacity:0}）
设置超时（（）=>
this.setState（{display:'none'}），300//与转换时间相同
)
}
}
render（）{
返回(
切换
)
}
}


我还鼓励您研究React Motion以处理更复杂的过渡，就像您处理
requestAnimationFrame

最常用的方法是分两步快速完成。将显示设置为“块”，然后在下一个循环中更改不透明度。但显示块是否是一项要求？改为更改zindex怎么样？是的，我认为如果元素使用
display:none
从渲染树中完全消失会很好。“下一个循环”是什么意思？事件循环的下一个循环。如果在显示为none的元素上触发css转换，则不会发生转换。如果您将其设置为block，那么在事件循环的下一轮触发转换时，它就会发生。无论有无反应，这都是正确的。如果你愿意，我可以用一些例子写一个答案。我的上述建议不是唯一的way@azium这就是我使用requestAnimationFrame的原因-难道不能使用workrequestAnimationFrame，只是不是您使用它的方式。我将用一些工作实例写一个答案。最常用的方法是分两步快速完成。将显示设置为“块”，然后在下一个循环中更改不透明度。但显示块是否是一项要求？改为更改zindex怎么样？是的，我认为如果元素使用
display:none
从渲染树中完全消失会很好。“下一个循环”是什么意思？事件循环的下一个循环。如果在显示为none的元素上触发css转换，则不会发生转换。如果您将其设置为block，那么在事件循环的下一轮触发转换时，它就会发生。无论有无反应，这都是正确的。如果你愿意，我可以用一些例子写一个答案。我的上述建议不是唯一的way@azium这就是我使用requestAnimationFrame的原因-难道不能使用workrequestAnimationFrame，只是不是您使用它的方式。我将用一些工作示例写一个答案为什么使用setTimeout而不是raf？如果只调用一次函数，这没有什么区别。它们都会在下一个可用的事件循环中触发是的，我只是问，因为setTimeout是一个糟糕的做法，因为你可能会想到setInterval，这对动画来说是不好的，因为它不能可靠地调用。setTImeout非常好，特别是如果你像在我的代码中那样调用它一次（不是为了动画），那么你为什么使用setTImeout而不是raf？如果你只调用函数一次，这没有什么区别。它们都会在下一个可用的事件循环中触发是的，我只是问，因为setTimeout是一个糟糕的做法，因为你可能会想到setInterval，这对动画来说是不好的，因为它不能可靠地调用。setTImeout非常好，特别是如果像在我的代码中那样只调用一次（不是动画）
const naviBGStyleClone = Object.assign({}, naviBGStyle);
if (this.props.status === 'closed') {
  naviBGStyleClone.display = 'none';
  if (typeof window !== 'undefined') {
    window.requestAnimationFrame(() => {
      naviBGStyleClone.opacity = 0;
    });
  }
} else {
  naviBGStyleClone.display = 'block';
  if (typeof window !== 'undefined') {
    window.requestAnimationFrame(() => {
      naviBGStyleClone.opacity = 1;
    });
  }
}

return (
    <div id="naviBG" style={naviBGStyleClone} role="button" onClick={this.onCloseClicked} />
);

class App extends React.Component {
  state = { display: 'none', opacity: 0 }

  toggle = () => {
    if (this.state.display === 'none') {
      this.setState({ display: 'block' })
      setTimeout(() =>
        this.setState({ opacity: 1 }), 10 // something very short
      )
    }
    if (this.state.display === 'block') {
      this.setState({ opacity: 0 })
      setTimeout(() =>
        this.setState({ display: 'none' }), 300 // same as transition time
      )
    }
  }

  render() {
    return (
      <div>
        <button onClick={this.toggle}>toggle</button>        
        <div 
          style={{ 
            transition: 'opacity 0.3s ease',
            opacity: this.state.opacity,
            display: this.state.display
          }} 
        />
      </div>
    )
  }
}