[英]antd design modal flicker on open
I am using antd design in my React App.我在我的 React 应用程序中使用 antd 设计。 I have noticed that antd design modal flickers when opened.
我注意到 antd design 模式在打开时会闪烁。
Is there a way I can fix this problem?有没有办法解决这个问题?
I am following the instructions from https://ant.design/components/modal/我正在遵循https://ant.design/components/modal/的说明
I do not have a codepen for this but I have written all the modals in following way and I am using the css from antd design.我没有这方面的代码笔,但我已经按照以下方式编写了所有模态,并且我使用的是 antd design 中的 css。
<Modal
visible={visible}
title="Title"
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
<Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
Submit
</Button>,
]}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
</Modal>
Never happened to me.从来没有发生在我身上。 Did you check for any css in developer tools that might be causing this issue?
您是否检查了可能导致此问题的开发人员工具中的任何 css? Example, when i was using modals, my background was getting dark.
例如,当我使用模态时,我的背景变暗了。 When I checked one of the ant's default class (which was not needed at all. It was a wrapper div which wrapped the actual modal divs) had dark background because of which that was happening.
当我检查蚂蚁的一个默认类(根本不需要它。它是一个包装实际模态 div 的包装 div)时,背景是深色的,因此发生了这种情况。 So, either by setting the
background: transparent;
所以,要么通过设置
background: transparent;
I could solve that issue.我可以解决那个问题。 But then i found this:
但后来我发现了这个:
mask = {false}
This goes into your modal declaration.这进入您的模态声明。 Something like this:
像这样的东西:
<Modal
visible={visible}
mask = {false}
title="Title"
onOk={this.handleOk}
onCancel={this.handleCancel}
footer={[
<Button key="back" size="large" onClick={this.handleCancel}>Return</Button>,
<Button key="submit" type="primary" size="large" loading={loading} onClick={this.handleOk}>
Submit
</Button>,
]}
>
So, give it a try.所以,试一试吧。 This might solve your problem.
这可能会解决您的问题。
One way to solve this issue:解决此问题的一种方法:
Pass the prop transitionName="" to the component that is flickering, which disables the transition on the component thus no flickering occurs.将 prop transitionName="" 传递给闪烁的组件,这会禁用组件上的转换,因此不会发生闪烁。
For more on this visit:有关此次访问的更多信息:
https://ant.design/components/modal/#How-to-disable-motion https://ant.design/components/modal/#How-to-disable-motion
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.