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

八了个戒

已于 2024-01-22 14:38:09 修改

阅读量2.5k

点赞数 7

文章标签： react antd 前端组件库 css

于 2024-01-22 14:32:16 首次发布

本文链接：https://blog.csdn.net/XH_jing/article/details/135746687

版权

本文介绍了如何在AntDesign(Antd)中去除组件如Model和Dropdown的默认动画效果，通过在ConfigProvider中设置motion属性为false并启用algorithm。示例代码和官方文档链接有助于开发者理解和应用这一技巧。

摘要由CSDN通过智能技术生成

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

总结

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

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

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

各位加油！

✨ $\textcolor{blue}{原创不易，还希望各位大佬支持一下}$

👍 $\textcolor{green}{点赞，你的认可是我创作的动力！}$

⭐️ $\textcolor{green}{收藏，你的青睐是我努力的方向！}$

✏️ $\textcolor{green}{评论，你的意见是我进步的财富！}$