FloatingActionButton z-index 更改延迟

Question

我遇到一个问题，当更改 z-index 值时，本应始终低于 FloatingActionButton (FAB) 的 div 暂时位于其上方。单击 FAB 时，会在 z-index 1000 处添加一个不可见的叠加层，然后将 div 和 FAB 分别设置为 1001 和 1002，以便在叠加层上单击。

但是当更改它们的 z-index 值时，FAB 在应用时似乎有延迟，导致 div 的隐藏部分的视觉伪像在 ~½ 秒左右可见.

我相信它与 FAB 的 animation/transition 相关联，但即使有 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'));

您可以在运行此处查看：https://codesandbox.io/s/k97m0yryw5

我用超时和 delay 状态成员做了一个解决方法，只在大约 400 毫秒后更改菜单的 z-index。但是因为这个菜单上有带有工具提示的按钮，所以如果你用鼠标很快就很奇怪了。

Answer 1

我在 FAB 组件中发现了一个 transition: 450ms，我怀疑这就是你的问题的原因。

只需强制 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'));

您可以在这里查看：https://codesandbox.io/s/m5xwj6j9q9

FloatingActionButton z-index 更改延迟

FloatingActionButton z-index change delay

javascript

z-index

reactjs

material-ui