Question

我在我的React App中使用了antd设计。我注意到打开时antd设计模态闪烁。

有没有办法解决这个问题？

的说明操作

我没有这方面的代码，但我已经按照以下方式编写了所有模式，并且我使用了antd设计中的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>

Answer 1

解决此问题的一种方法：

将 prop transitionName="" 传递给正在闪烁的组件，这将禁用组件上的转换，因此不会发生闪烁。

有关此次访问的更多信息：

https://ant.design/components/modal/#How-to-disable-motion

Answer 2

从未发生在我身上。您是否检查过可能导致此问题的开发人员工具中的任何CSS？例如，当我使用模态时，我的背景变暗了。当我检查一个蚂蚁的默认类（根本不需要它。它是一个包装实际模态div的包装div）有深色背景，因为它正在发生。所以，通过设置background: transparent;我可以解决这个问题。但后来我发现了这个：

mask = {false}

这进入你的模态声明。像这样：

         <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>,
          ]}
        >

所以，试一试。这可能会解决您的问题。

开放时的antd设计模态闪烁

2 个答案: