Question

我有一个问题，在更改z-index值时，应该始终位于FloatingActionButton（FAB）之下的div暂时高于它。单击FAB时，在z-index 1000处添加不可见的叠加层，然后div和FAB分别设置为1001和1002，以便在叠加层上单击。

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

我认为它与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状态成员进行了解决方法，仅在大约400ms后更改菜单的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更改延迟

1 个答案: