我找到了一个
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