From 5b8ebdc337d191ea91bbc320e23e263fc1fad932 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Mon, 14 Nov 2022 15:11:56 +0800
Subject: [PATCH] fix: checkbox trans in Firefox (#38503)

* fix: checkbox trans in Firefox

* chore: code
---
 components/checkbox/style/index.tsx | 8 ++++----
 components/theme/interface.ts       | 1 +
 components/theme/themes/seed.ts     | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/checkbox/style/index.tsx b/components/checkbox/style/index.tsx
index 17c583084d..eeba41674f 100644
--- a/components/checkbox/style/index.tsx
+++ b/components/checkbox/style/index.tsx
@@ -24,7 +24,7 @@ const antCheckboxEffect = new Keyframes('antCheckboxEffect', {
 });
 
 // ============================== Styles ==============================
-export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
+export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
   const { checkboxCls } = token;
   const wrapperCls = `${checkboxCls}-wrapper`;
 
@@ -107,7 +107,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
           border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
           borderRadius: token.borderRadiusSM,
           borderCollapse: 'separate',
-          transition: `all ${token.motionDurationFast}`,
+          transition: `all ${token.motionDurationSlow}`,
 
           '&:after': {
             boxSizing: 'border-box',
@@ -122,8 +122,8 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
             borderInlineStart: 0,
             transform: 'rotate(45deg) scale(0) translate(-50%,-50%)',
             opacity: 0,
-            transition: `all ${token.motionDurationFast} cubic-bezier(.71,-.46,.88,.6), opacity ${token.motionDurationFast}`,
             content: '""',
+            transition: `all ${token.motionDurationFast} ${token.motionEaseInBack}, opacity ${token.motionDurationFast}`,
           },
         },
 
@@ -188,7 +188,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = token => {
           '&:after': {
             opacity: 1,
             transform: 'rotate(45deg) scale(1) translate(-50%,-50%)',
-            transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
+            transition: `all ${token.motionDurationMid} ${token.motionEaseOutBack} ${token.motionDurationFast}`,
           },
         },
 
diff --git a/components/theme/interface.ts b/components/theme/interface.ts
index eb8b900140..300e042ca3 100644
--- a/components/theme/interface.ts
+++ b/components/theme/interface.ts
@@ -175,6 +175,7 @@ export interface SeedToken extends PresetColorType {
   motionEaseInOutCirc: string;
   motionEaseInOut: string;
   motionEaseOutBack: string;
+  motionEaseInBack: string;
   motionEaseInQuint: string;
   motionEaseOutQuint: string;
   motionEaseOut: string;
diff --git a/components/theme/themes/seed.ts b/components/theme/themes/seed.ts
index 9920ef5f4f..b5e5a67132 100644
--- a/components/theme/themes/seed.ts
+++ b/components/theme/themes/seed.ts
@@ -48,6 +48,7 @@ const seedToken: SeedToken = {
   motionEaseOut: 'cubic-bezier(0.215, 0.61, 0.355, 1)',
   motionEaseInOut: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
   motionEaseOutBack: `cubic-bezier(0.12, 0.4, 0.29, 1.46)`,
+  motionEaseInBack: `cubic-bezier(0.71, -0.46, 0.88, 0.6)`,
   motionEaseInQuint: `cubic-bezier(0.645, 0.045, 0.355, 1)`,
   motionEaseOutQuint: `cubic-bezier(0.23, 1, 0.32, 1)`,