perf(Badge): 针对使用Transition进行优化

79E · Dec 1, 2022 · 3c2e933 · 3c2e933
1 parent 3c53192
commit 3c2e933
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 65 deletions.
diff --git a/src/components/badge/README.md b/src/components/badge/README.md
@@ -55,6 +55,7 @@ import { Badge } from "aunt";
 | bordered | 是否有白色边框 | `boolean` | `false` |
 | color | 徽标背景颜色 | `string` | `-` |
 | offset | 徽标位置偏移量 | `[number \| string, number \| string]` | `-` |
+| transitionStyles | Transition 组件动画样式 | `TransitionStyles` | `-` |
 
 ## 样式变量
 

diff --git a/src/components/badge/badge.tsx b/src/components/badge/badge.tsx
@@ -50,11 +50,7 @@ const Badge: FunctionComponent<BadgeProps> = props => {
 
  return (
  <div className={ns.b()}>
- <Transition
- in={visible}
- timeout={timeout}
- type={ns.m(props.children ? 'scale-translate' : 'scale')}
- >
+ <Transition in={visible} timeout={timeout} transitionStyles={props.transitionStyles}>
  <div className={varClasses} style={varStyles}>
  {!dot && <>{Number(content) && Number(content) > maxCount ? `${maxCount}+` : content}</>}
  </div>

diff --git a/src/components/badge/styles/index.less b/src/components/badge/styles/index.less
@@ -58,63 +58,3 @@
  border-radius: 100%;
  }
 }
-
-@keyframes scale-translate-on {
- 0% {
- transform: scale(0) translate(50%, -50%);
- opacity: 0;
- }
- 100% {
- transform: scale(1) translate(50%, -50%);
- opacity: 1;
- }
-}
-
-@keyframes scale-translate-off {
- 0% {
- transform: scale(1) translate(50%, -50%);
- opacity: 1;
- }
- 100% {
- transform: scale(0) translate(50%, -50%);
- opacity: 0;
- }
-}
-
-.@{class-prefix}-badge--scale-translate-enter-active {
- animation: scale-translate-on 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
-}
-
-.@{class-prefix}-badge--scale-translate-exit-active {
- animation: scale-translate-off 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
-}
-
-@keyframes scale-on {
- 0% {
- transform: scale(0);
- opacity: 0;
- }
- 100% {
- transform: scale(1);
- opacity: 1;
- }
-}
-
-@keyframes scale-off {
- 0% {
- transform: scale(1);
- opacity: 1;
- }
- 100% {
- transform: scale(0);
- opacity: 0;
- }
-}
-
-.@{class-prefix}-badge--scale-enter-active {
- animation: scale-on 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
-}
-
-.@{class-prefix}-badge--scale-exit-active {
- animation: scale-off 0.4s cubic-bezier(0.3, 1.3, 0.3, 1) forwards;
-}
diff --git a/src/components/badge/types.ts b/src/components/badge/types.ts
@@ -1,4 +1,5 @@
 import React from 'react';
+import { TransitionStyles } from '../transition';
 import { BaseTypeProps } from '../../utils';
 
 // 定义接受到的参数 类型
@@ -48,4 +49,8 @@ export interface BadgeProps extends BaseTypeProps {
  * @default ''
  */
  color?: string;
+ /**
+ * @name Transition 组件动画样式设定
+ */
+ transitionStyles?: TransitionStyles;
 }