关于 Ant Design 如何给组件去掉/关闭动画效果的解决方案【Antd v5 已解决】

Ant Design（下面简称Antd）中很多组件的显示和关闭的动画效果确实有点突兀，我们该如何把这个过渡的动画效果去掉，直接显示隐藏就可以了呢？
比如，给 Model、Dropdown … 等组件

解决方案

其实 Antd 设计规范和技术上支持灵活的样式定制，来满足业务和品牌上多样化的视觉需求

Antd 默认内置了一些组件交互动效让企业级页面更加富有细节，在一些极端场景可能会影响页面交互性能，如需关闭动画可以在 ConfigProvider 给组件 Dropdown 设置 motion: false

👇 下面请看示例：

• index.html

  <div id="root"></div>
  

• index.js

  注意：得加上 algorithm: true，因为 motion: false 会用来计算动画时长，并不是直接用的。

  import React from "react";
  import { createRoot } from "react-dom/client";
  import { ConfigProvider, Dropdown, version } from "antd";
  import "antd/dist/reset.css";
  
  const App = () => {
    return (
      <ConfigProvider
        theme={{
          components: {
            Dropdown: {
              motion: false,
              algorithm: true,
            },
          },
        }}
      >
        <div className="App">
          <h1>antd version: {version}</h1>
          <Dropdown
            menu={{
              items: [
                {
                  label: "Image",
                  key: "1",
                },
              ],
            }}
            trigger={["click"]}
          >
            <div>Click</div>
          </Dropdown>
        </div>
      </ConfigProvider>
    );
  };
  
  const root = createRoot(document.getElementById("root"));
  root.render(<App />);
  

👆 此部分代码示例：Open Sandbox

👇 官方示例：Open Sandbox

---

总结

如果大家有其他更好的解决方案，欢迎评论区讨论留言哟～

关于 定制主题 - 禁用动画，大家可以认真看一下官方文档哟～

希望上面的内容对你的工作学习有所帮助！欢迎各位一键三连哦～

各位 加油！

?$原创不易，还希望各位大佬支持一下$

👍 $点赞，你的认可是我创作的动力！$

?? $收藏，你的青睐是我努力的方向！$

?? $评论，你的意见是我进步的财富！$