我有一个组件,这是一个Modal
警报。为了动画模态,我正在使用来自语义ui-react的Transition
。但只有少数动画(pulse
,bounce
,flash
)正在工作,这也只是在安装组件时,而不是在我关闭Modal
时工作。此外,duration
财产也不起作用。
class Alert extends React.Component {
state = {
open: true
};
close = () => {
this.setState({
open: false
});
};
render() {
const { open } = this.state;
return (
<Transition animation="fade" duration={1000} visible={open}>
<Modal
size="mini"
closeOnDimmerClick={false}
closeOnEscape={false}
open={this.state.open}
onClose={this.close}>
<Modal.Content>
<p>
Hello user
</p>
</Modal.Content>
<Modal.Actions>
<Button color="blue" onClick={this.close}>
Ok
</Button>
</Modal.Actions>
</Modal>
</Transition>
);
}
}
为什么这么奇怪的行为?我究竟做错了什么?
在Modal
可以为它设置动画之前,Transition
是卸载方式,一种方法是让Transition卸载模态:
class Alert extends React.Component {
state = {
open: true
};
close = () => {
this.setState({
open: false
});
};
render() {
const { open } = this.state;
return (
<Transition
animation="fade"
duration={1000}
unmountOnHide={true}
visible={open}
>
<Modal
size="mini"
closeOnDimmerClick={false}
closeOnEscape={false}
open={true}
onClose={this.close}
>
<Modal.Content>
<p>Hello user</p>
</Modal.Content>
<Modal.Actions>
<Button color="blue" onClick={this.close}>
Ok
</Button>
</Modal.Actions>
</Modal>
</Transition>
);
}
}
我希望它有所帮助!