Javascript 浮动操作按钮z索引更改延迟

我有一个问题，当更改z索引值时，应该始终位于FloatingActionButton（FAB）下方的div临时位于其上方。单击晶圆厂时，将在z索引1000处添加一个不可见覆盖层，然后将div和晶圆厂分别设置为1001和1002，以便可在覆盖层上单击

但是，当更改其z-索引值时，应用FAB时，FAB似乎有延迟，导致div隐藏部分的视觉伪影在大约½秒的时间内可见

我相信这与工厂的动画/过渡有关，但即使使用

disableTouchRipple

和

disableFocusRipple

问题仍然存在

这是一个MCVE：

import React from 'react';
import {render} from 'react-dom';
import {FloatingActionButton, MuiThemeProvider} from 'material-ui';

const styles = {
  s1: {
    position: 'absolute',
    width: 100,
    height: 32,
    top: 32,
    left: 10,
    background: 'black'
  }, s2: {
    position: 'absolute',
    left: 80,
    top: 20
  }, overlay: {
    position: 'fixed',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 1000
  }
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      open: false
    };
  }

  onClick = () => {
    this.setState({open: !this.state.open});
  }

  render() {
    let menuStyle = {
      ...styles.s1,
      zIndex: this.state.open ? 1001 : 10
    };

    let fabStyle = {
      ...styles.s2,
      zIndex: this.state.open ? 1002 : 20
    };

    return (
     <MuiThemeProvider>
      {this.state.open && <div style={styles.overlay}/>}
      {this.state.open && <div style={menuStyle}/>}
      <FloatingActionButton style={fabStyle} onClick={this.onClick}>{'\u2728'}</FloatingActionButton>
     </MuiThemeProvider>
    );    
  }
}

render(<App />, document.getElementById('root'));

从“React”导入React；
从'react dom'导入{render}；
从“材料ui”导入{FloatingActionButton，MuiThemeProvider}；
常量样式={
s1:{
位置：'绝对'，
宽度：100，
身高：32，
前32名，
左:10,，
背景：“黑色”
}，s2：{
位置：'绝对'，
左:80,，
前20名
}，叠加：{
位置：'固定'，
排名：0，
底部：0，
左:0,，
右:0,，
zIndex:1000
}
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：假
};
}
onClick=（）=>{
this.setState（{open:！this.state.open}）；
}
render（）{
设menuStyle={
…样式1，
辛德克斯：这个州公开赛？1001:10
};
让fabStyle={
…样式2，
辛德克斯：这个州开？1002:20
};
返回(
{this.state.open&&}
{this.state.open&&}
{'\u2728'}
);    
}
}
渲染(

我做了一个解决办法，有一个超时和一个延迟状态成员，只在大约400毫秒后更改菜单的z索引。但是由于这个菜单上有带工具提示的按钮，如果你能快速使用鼠标，那就很奇怪了。
我在FAB组件中发现了一个
转换：450毫秒
，我怀疑这就是问题的原因

只需强制执行
transition:0
就足以解决问题，但我不能保证是否有任何动画会停止工作

import React from 'react';
import {render} from 'react-dom';
import {FloatingActionButton, MuiThemeProvider} from 'material-ui';

const styles = {
  s1: {
    position: 'absolute',
    width: 100,
    height: 32,
    top: 32,
    left: 10,
    background: 'black'
  }, s2: {
    position: 'absolute',
    left: 80,
    top: 20
  }, overlay: {
    position: 'fixed',
    top: 0,
    bottom: 0,
    left: 0,
    right: 0,
    zIndex: 1000
  }
};

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      open: false
    };
  }

  onClick = () => {
    this.setState({open: !this.state.open});
  }

  render() {
    let menuStyle = {
      ...styles.s1,
      zIndex: this.state.open ? 1001 : 10
    };

    let fabStyle = {
      ...styles.s2,
      zIndex: this.state.open ? 1002 : 20,
      transition: 0,
    };

    return (
     <MuiThemeProvider>
      {this.state.open && <div style={styles.overlay}/>}
      {this.state.open && <div style={menuStyle}/>}
      <FloatingActionButton style={fabStyle} onClick={this.onClick}>{'\u2728'}</FloatingActionButton>
     </MuiThemeProvider>
    );    
  }
}

render(<App />, document.getElementById('root'));

从“React”导入React；
从'react dom'导入{render}；
从“材料ui”导入{FloatingActionButton，MuiThemeProvider}；
常量样式={
s1:{
位置：'绝对'，
宽度：100，
身高：32，
前32名，
左:10,，
背景：“黑色”
}，s2：{
位置：'绝对'，
左:80,，
前20名
}，叠加：{
位置：'固定'，
排名：0，
底部：0，
左:0,，
右:0,，
zIndex:1000
}
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
开放：假
};
}
onClick=（）=>{
this.setState（{open:！this.state.open}）；
}
render（）{
设menuStyle={
…样式1，
辛德克斯：这个州公开赛？1001:10
};
让fabStyle={
…样式2，
辛德克斯：这个州公开赛？1002:20，
转换：0，
};
返回(
{this.state.open&&}
{this.state.open&&}
{'\u2728'}
);    
}
}
render（
您可以这样做吗？在构造函数中声明样式，然后在onclick中使用以下状态更改它们：（不确定这是否是您的反应方式）
setState
是异步的，因此在您添加的样式更新针对状态运行时，
open
成员可能没有更改。这就是为什么样式更新在渲染函数中，在任何状态更新完成后调用该函数。但是，问题不在于我的代码，而在于FAB，但我不知道为什么呢？在这一点上，动画不如防止用户体验被追尾那么重要。