代码之家  ›  专栏  ›  技术社区  ›  Nick

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

  •  1
  • Nick  · 技术社区  · 7 年前

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

    但是,当改变z指数值时,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'));
    

    您可以在此处看到它正在运行: https://codesandbox.io/s/k97m0yryw5

    我通过超时和 delay 成员,仅在大约400ms后更改菜单的z索引。但由于这个菜单上有带有工具提示的按钮,如果你的鼠标很快,那就很奇怪了。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Diogo Sgrillo    7 年前

    我找到了一个 transition: 450ms 在FAB组件中,并怀疑这是您问题的原因。

    只是强迫 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