如何为Material UI的GridToolbarColumnsButton实现GridToolbarFilterButton的徽章动画

问题根源 #

GridToolbarFilterButton默认使用的是MUI Data Grid内部封装的GridBadge组件，这个组件自带徽章显示/隐藏时的缩放过渡动画；而你手动添加的原生Badge组件没有继承该动画逻辑，因此只会直接显示或消失。

方案1：复用内置GridBadge组件 #

直接使用Data Grid提供的内部GridBadge组件，它和Filter按钮用的是同一套实现，自带动画效果：

import { GridBadge } from '@mui/x-data-grid';

// 替换自定义Columns按钮中的原生Badge
<GridToolbarColumnsButton
  {...props}
  sx={{ ...props.sx }}
>
  <GridBadge
    badgeContent={visibleColumnsCount}
    color="error"
    invisible={visibleColumnsCount === totalColumnsCount}
  >
    <ViewColumnIcon />
  </GridBadge>
</GridToolbarColumnsButton>

方案2：手动为原生Badge添加动画 #

如果不想依赖内置组件，也可以通过自定义CSS过渡实现同款缩放效果：

import { Badge, styled } from '@mui/material';

// 封装带缩放动画的Badge组件
const AnimatedBadge = styled(Badge)(({ theme }) => ({
  '& .MuiBadge-badge': {
    transition: 'transform 200ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1)',
    '&.MuiBadge-invisible': {
      transform: 'scale(0)',
      opacity: 0,
    },
  },
}));

// 在Columns按钮中使用自定义AnimatedBadge
<GridToolbarColumnsButton
  {...props}
  sx={{ ...props.sx }}
>
  <AnimatedBadge
    badgeContent={visibleColumnsCount}
    color="error"
    invisible={visibleColumnsCount === totalColumnsCount}
  >
    <ViewColumnIcon />
  </AnimatedBadge>
</GridToolbarColumnsButton>

官方动态 #

目前MUI-X项目已有相关规划，官方会在后续版本中为GridToolbarColumnsButton默认添加徽章及配套动画，可留意版本更新。

内容的提问来源于stack exchange，提问作者Josh Kautz