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

本文介绍了如何在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}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值