reactjs - 为什么 React-Semantic-UI 转换不为组件设置动画?
问题描述
我有一个Modal
警告组件。对于 Modal 动画,我使用了Transition
from semantic-ui-react。但是只有少数动画(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 卸载 Modal:
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>
);
}
}
我希望它有帮助!
推荐阅读
- react-native - 我可以在 React Native 中用陀螺仪掷骰子吗?
- javascript - 使用 XSLT 或任何其他方法的 XML 到 HTML 表
- javascript - 如何自动关闭自定义的 vue toast 组件
- xamarin.forms - 如何在 Xamarin.Forms 中使用 PKPaymentButton
- c# - AdaptiveSubmitAction 不适用于移动应用
- python - 为什么我的 API 注释会返回模型中的所有项目?
- python-3.x - 预测(棋子分类)
- vue.js - Vuex registerModule 方法注册一个空模块
- python - 我无法打开 snowsql,因为它收到 ModuleNotFoundError 之类的错误
- python - 无法正确读取 json 文件