javascript - FloatingActionButton z-index 更改延迟

Question

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

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

我相信它与 FAB 的动画/转换有关，但即使使用 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