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

总结

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

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

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

各位 加油！

?

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

extcolor{blue}{原创不易，还希望各位大佬支持一下}

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

??

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

extcolor{green}{点赞，你的认可是我创作的动力！}

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

??

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

extcolor{green}{收藏，你的青睐是我努力的方向！}

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

??

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

extcolor{green}{评论，你的意见是我进步的财富！}

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