From 75b090aff3a0e0bec1eb24360e8c207b3d8dfb6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Mon, 18 May 2020 17:31:46 +0800
Subject: [PATCH] fix: Switch trigger motion (#24254)

* init fix

* fix rtl

* clean up

* update snapshot

* fix style lint

* add motion of inner

* update un-checked focus style
---
 .../__tests__/__snapshots__/demo.test.js.snap |   4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   3 +
 .../__snapshots__/components.test.js.snap     |  15 ++
 .../__tests__/__snapshots__/demo.test.js.snap |   3 +
 .../__tests__/__snapshots__/demo.test.js.snap |   8 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  10 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   3 +
 .../__tests__/__snapshots__/demo.test.js.snap |  12 +
 .../__tests__/__snapshots__/demo.test.js.snap |  11 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   6 +
 components/style/themes/default.less          |   8 +-
 .../__tests__/__snapshots__/demo.test.js.snap | 107 +++++----
 .../__snapshots__/index.test.js.snap          |   8 +-
 components/switch/index.tsx                   |   6 +-
 components/switch/style/index.less            | 205 ++++++++----------
 components/switch/style/rtl.less              |  73 +++----
 .../__tests__/__snapshots__/demo.test.js.snap |  35 ++-
 .../__snapshots__/tooltip.test.js.snap        |   3 +
 .../__tests__/__snapshots__/demo.test.js.snap |   9 +
 .../__tests__/__snapshots__/demo.test.js.snap |   7 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  13 +-
 package.json                                  |   2 +-
 22 files changed, 329 insertions(+), 222 deletions(-)

diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index 88e4b1a7ee93..aff2fcf5a3bc 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -469,11 +469,13 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
     </span>
     <button
       aria-checked="true"
-      checked=""
       class="ant-switch ant-switch-checked"
       role="switch"
       type="button"
     >
+      <div
+        class="ant-switch-handle"
+      />
       <span
         class="ant-switch-inner"
       />
diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
index 37936d163313..159955b9c6b1 100644
--- a/components/card/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -420,6 +420,9 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 04351628011c..1897b42af557 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -19397,6 +19397,9 @@ exports[`ConfigProvider components Switch configProvider 1`] = `
   role="switch"
   type="button"
 >
+  <div
+    class="config-switch-handle"
+  />
   <span
     class="config-switch-inner"
   />
@@ -19410,6 +19413,9 @@ exports[`ConfigProvider components Switch configProvider componentSize large 1`]
   role="switch"
   type="button"
 >
+  <div
+    class="config-switch-handle"
+  />
   <span
     class="config-switch-inner"
   />
@@ -19423,6 +19429,9 @@ exports[`ConfigProvider components Switch configProvider componentSize middle 1`
   role="switch"
   type="button"
 >
+  <div
+    class="config-switch-handle"
+  />
   <span
     class="config-switch-inner"
   />
@@ -19436,6 +19445,9 @@ exports[`ConfigProvider components Switch normal 1`] = `
   role="switch"
   type="button"
 >
+  <div
+    class="ant-switch-handle"
+  />
   <span
     class="ant-switch-inner"
   />
@@ -19449,6 +19461,9 @@ exports[`ConfigProvider components Switch prefixCls 1`] = `
   role="switch"
   type="button"
 >
+  <div
+    class="prefix-Switch-handle"
+  />
   <span
     class="prefix-Switch-inner"
   />
diff --git a/components/empty/__tests__/__snapshots__/demo.test.js.snap b/components/empty/__tests__/__snapshots__/demo.test.js.snap
index 4bd2fdf231a0..623cb1c64f35 100644
--- a/components/empty/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/empty/__tests__/__snapshots__/demo.test.js.snap
@@ -83,6 +83,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     >
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 1b5b0e01fb2d..b39c2226463d 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -3262,10 +3262,13 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
           >
             <button
               aria-checked="false"
-              class="ant-switch-small ant-switch"
+              class="ant-switch ant-switch-small"
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -4169,6 +4172,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             role="switch"
             type="button"
           >
+            <div
+              class="ant-switch-handle"
+            />
             <span
               class="ant-switch-inner"
             />
diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap
index 56d81ffe66ab..c22eb070eead 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap
@@ -817,6 +817,9 @@ Array [
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
@@ -832,6 +835,9 @@ Array [
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
@@ -1064,11 +1070,13 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
 Array [
   <button
     aria-checked="true"
-    checked=""
     class="ant-switch ant-switch-checked"
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     >
diff --git a/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap b/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
index 1b6c6fa9676d..95dc504f8f32 100644
--- a/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
@@ -24,6 +24,9 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.md correctly 1`] =
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
index 1b6f8b722b3c..dfd632184732 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
@@ -136,6 +136,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
                 role="switch"
                 type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
                   class="ant-switch-inner"
                 />
@@ -363,6 +366,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
                 role="switch"
                 type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
                   class="ant-switch-inner"
                 />
@@ -571,6 +577,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
                 role="switch"
                 type="button"
               >
+                <div
+                  class="ant-switch-handle"
+                />
                 <span
                   class="ant-switch-inner"
                 />
@@ -688,6 +697,9 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
diff --git a/components/slider/__tests__/__snapshots__/demo.test.js.snap b/components/slider/__tests__/__snapshots__/demo.test.js.snap
index e1f1e9d84d57..2bab83067360 100644
--- a/components/slider/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/slider/__tests__/__snapshots__/demo.test.js.snap
@@ -69,10 +69,13 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
   Disabled: 
   <button
     aria-checked="false"
-    class="ant-switch-small ant-switch"
+    class="ant-switch ant-switch-small"
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
@@ -913,11 +916,13 @@ exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
   Reversed: 
   <button
     aria-checked="true"
-    checked=""
-    class="ant-switch-small ant-switch ant-switch-checked"
+    class="ant-switch ant-switch-small ant-switch-checked"
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
diff --git a/components/spin/__tests__/__snapshots__/demo.test.js.snap b/components/spin/__tests__/__snapshots__/demo.test.js.snap
index 77914558d55f..744b0b47e2bf 100644
--- a/components/spin/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/spin/__tests__/__snapshots__/demo.test.js.snap
@@ -86,6 +86,9 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
       role="switch"
       type="button"
     >
+      <div
+        class="ant-switch-handle"
+      />
       <span
         class="ant-switch-inner"
       />
@@ -156,6 +159,9 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
       role="switch"
       type="button"
     >
+      <div
+        class="ant-switch-handle"
+      />
       <span
         class="ant-switch-inner"
       />
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 78b530e33e29..a255fb718367 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -718,13 +718,15 @@
 @switch-sm-height: 16px;
 @switch-min-width: 44px;
 @switch-sm-min-width: 28px;
-@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
 @switch-disabled-opacity: 0.4;
 @switch-color: @primary-color;
 @switch-bg: @component-background;
 @switch-shadow-color: fade(#00230b, 20%);
-@switch-inner-margin-min: 6px;
-@switch-inner-margin-max: 24px;
+@switch-padding: 2px;
+@switch-inner-margin-min: ceil(@switch-height * 0.3);
+@switch-inner-margin-max: ceil(@switch-height * 1.1);
+@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3);
+@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1);
 
 // Pagination
 // ---
diff --git a/components/switch/__tests__/__snapshots__/demo.test.js.snap b/components/switch/__tests__/__snapshots__/demo.test.js.snap
index 45b5b0c15cc6..65bd47dad936 100644
--- a/components/switch/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/switch/__tests__/__snapshots__/demo.test.js.snap
@@ -7,6 +7,9 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
   role="switch"
   type="button"
 >
+  <div
+    class="ant-switch-handle"
+  />
   <span
     class="ant-switch-inner"
   />
@@ -22,6 +25,9 @@ exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
@@ -42,31 +48,35 @@ exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
 <div>
   <button
     aria-checked="true"
-    class="ant-switch-loading ant-switch ant-switch-checked ant-switch-disabled"
+    class="ant-switch ant-switch-loading ant-switch-checked ant-switch-disabled"
     disabled=""
     role="switch"
     type="button"
   >
-    <span
-      aria-label="loading"
-      class="anticon anticon-loading ant-switch-loading-icon"
-      role="img"
+    <div
+      class="ant-switch-handle"
     >
-      <svg
-        aria-hidden="true"
-        class="anticon-spin"
-        data-icon="loading"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="0 0 1024 1024"
-        width="1em"
+      <span
+        aria-label="loading"
+        class="anticon anticon-loading ant-switch-loading-icon"
+        role="img"
       >
-        <path
-          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-        />
-      </svg>
-    </span>
+        <svg
+          aria-hidden="true"
+          class="anticon-spin"
+          data-icon="loading"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 1024 1024"
+          width="1em"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </span>
+    </div>
     <span
       class="ant-switch-inner"
     />
@@ -74,31 +84,35 @@ exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
   <br />
   <button
     aria-checked="false"
-    class="ant-switch-small ant-switch-loading ant-switch ant-switch-disabled"
+    class="ant-switch ant-switch-small ant-switch-loading ant-switch-disabled"
     disabled=""
     role="switch"
     type="button"
   >
-    <span
-      aria-label="loading"
-      class="anticon anticon-loading ant-switch-loading-icon"
-      role="img"
+    <div
+      class="ant-switch-handle"
     >
-      <svg
-        aria-hidden="true"
-        class="anticon-spin"
-        data-icon="loading"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="0 0 1024 1024"
-        width="1em"
+      <span
+        aria-label="loading"
+        class="anticon anticon-loading ant-switch-loading-icon"
+        role="img"
       >
-        <path
-          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-        />
-      </svg>
-    </span>
+        <svg
+          aria-hidden="true"
+          class="anticon-spin"
+          data-icon="loading"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 1024 1024"
+          width="1em"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </span>
+    </div>
     <span
       class="ant-switch-inner"
     />
@@ -114,6 +128,9 @@ exports[`renders ./components/switch/demo/size.md correctly 1`] = `
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
@@ -121,10 +138,13 @@ exports[`renders ./components/switch/demo/size.md correctly 1`] = `
   <br />
   <button
     aria-checked="true"
-    class="ant-switch-small ant-switch ant-switch-checked"
+    class="ant-switch ant-switch-small ant-switch-checked"
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
@@ -140,6 +160,9 @@ exports[`renders ./components/switch/demo/text.md correctly 1`] = `
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     >
@@ -153,6 +176,9 @@ exports[`renders ./components/switch/demo/text.md correctly 1`] = `
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     >
@@ -166,6 +192,9 @@ exports[`renders ./components/switch/demo/text.md correctly 1`] = `
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     >
diff --git a/components/switch/__tests__/__snapshots__/index.test.js.snap b/components/switch/__tests__/__snapshots__/index.test.js.snap
index d9c1b9e79b9d..ff6873ee610b 100644
--- a/components/switch/__tests__/__snapshots__/index.test.js.snap
+++ b/components/switch/__tests__/__snapshots__/index.test.js.snap
@@ -3,10 +3,13 @@
 exports[`Switch rtl render component should be rendered correctly in RTL direction 1`] = `
 <button
   aria-checked="false"
-  class="ant-switch-rtl ant-switch"
+  class="ant-switch ant-switch-rtl"
   role="switch"
   type="button"
 >
+  <div
+    class="ant-switch-handle"
+  />
   <span
     class="ant-switch-inner"
   />
@@ -21,6 +24,9 @@ exports[`Switch should has click wave effect 1`] = `
   role="switch"
   type="button"
 >
+  <div
+    class="ant-switch-handle"
+  />
   <span
     class="ant-switch-inner"
   />
diff --git a/components/switch/index.tsx b/components/switch/index.tsx
index 62282f6fae68..50a0538702c6 100755
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@@ -53,7 +53,11 @@ const Switch = React.forwardRef<unknown, SwitchProps>((props, ref) => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const size = React.useContext(SizeContext);
   const prefixCls = getPrefixCls('switch', customizePrefixCls);
-  const loadingIcon = loading ? <LoadingOutlined className={`${prefixCls}-loading-icon`} /> : null;
+  const loadingIcon = (
+    <div className={`${prefixCls}-handle`}>
+      {loading && <LoadingOutlined className={`${prefixCls}-loading-icon`} />}
+    </div>
+  );
 
   const classes = classNames(className, {
     [`${prefixCls}-small`]: (customizeSize || size) === 'small',
diff --git a/components/switch/style/index.less b/components/switch/style/index.less
index be2a489979be..fad883d9920f 100644
--- a/components/switch/style/index.less
+++ b/components/switch/style/index.less
@@ -4,6 +4,9 @@
 @switch-prefix-cls: ~'@{ant-prefix}-switch';
 @switch-duration: 0.36s;
 
+@switch-pin-size: @switch-height - 4px;
+@switch-sm-pin-size: @switch-sm-height - 4px;
+
 .@{switch-prefix-cls} {
   .reset-component;
 
@@ -12,168 +15,138 @@
   box-sizing: border-box;
   min-width: @switch-min-width;
   height: @switch-height;
-  line-height: @switch-height - 2px;
+  line-height: @switch-height;
   vertical-align: middle;
   background-color: @disabled-color;
-  border: 1px solid transparent;
+  border: 0;
   border-radius: 100px;
   cursor: pointer;
   transition: all @switch-duration;
   user-select: none;
 
+  &:focus {
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@disabled-color, 10%);
+  }
+
+  &-checked:focus {
+    box-shadow: 0 0 0 2px fade(@switch-color, 20%);
+  }
+
+  &:focus:hover {
+    box-shadow: none;
+  }
+
+  &-checked {
+    background-color: @switch-color;
+  }
+
+  &-loading,
+  &-disabled {
+    cursor: not-allowed;
+    opacity: @switch-disabled-opacity;
+    * {
+      box-shadow: none;
+      cursor: not-allowed;
+    }
+  }
+
+  // ========================= Inner ==========================
   &-inner {
     display: block;
-    margin-right: @switch-inner-margin-min;
-    margin-left: @switch-inner-margin-max;
+    margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
     color: @text-color-inverse;
     font-size: @font-size-sm;
+    transition: margin @switch-duration;
   }
 
-  &-loading-icon,
-  &::after {
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    width: @switch-height - 4px;
-    height: @switch-height - 4px;
-    background-color: @switch-bg;
-    border-radius: 18px;
-    cursor: pointer;
-    transition: all @switch-duration @ease-in-out-circ;
-    content: ' ';
+  &-checked &-inner {
+    margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
   }
 
-  &::after {
-    box-shadow: 0 2px 4px 0 @switch-shadow-color;
-  }
-
-  &:not(&-disabled):active::before,
-  &:not(&-disabled):active::after {
-    width: 24px;
-  }
+  // ========================= Handle =========================
+  &-handle {
+    position: absolute;
+    top: @switch-padding;
+    left: @switch-padding;
+    width: @switch-pin-size;
+    height: @switch-pin-size;
+    transition: all @switch-duration @ease-in-out-circ;
 
-  &-loading-icon {
-    z-index: 1;
-    display: none;
-    font-size: 12px;
-    // loading default use animation
-    // animation: loadingCircle 1s infinite linear;
-    background: transparent;
-    svg {
+    &::before {
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
       left: 0;
-      margin: auto;
+      background-color: @switch-bg;
+      border-radius: @switch-pin-size / 2;
+      box-shadow: 0 2px 4px 0 @switch-shadow-color;
+      transition: all @switch-duration @ease-in-out-circ;
+      content: '';
     }
   }
 
-  &-loading &-loading-icon {
-    display: inline-block;
-    color: rgba(0, 0, 0, 0.65);
+  &-checked &-handle {
+    left: calc(100% - @switch-pin-size - @switch-padding);
   }
 
-  &-checked&-loading &-loading-icon {
-    color: @switch-color;
+  &:not(&-disabled):active {
+    .@{switch-prefix-cls}-handle::before {
+      right: -30%;
+      left: 0;
+    }
+
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-handle::before {
+        right: 0;
+        left: -30%;
+      }
+    }
   }
 
-  &:focus {
-    outline: 0;
-    box-shadow: 0 0 0 2px fade(@switch-color, 20%);
+  // ======================== Loading =========================
+  &-loading-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: rgba(0, 0, 0, 0.65);
+    transform: translate(-50%, -50%);
   }
 
-  &:focus:hover {
-    box-shadow: none;
+  &-checked &-loading-icon {
+    color: @switch-color;
   }
 
+  // ========================== Size ==========================
   &-small {
     min-width: @switch-sm-min-width;
     height: @switch-sm-height;
-    line-height: @switch-sm-height - 2px;
+    line-height: @switch-sm-height;
 
     .@{switch-prefix-cls}-inner {
-      margin-right: 3px;
-      margin-left: 18px;
+      margin: 0 @switch-sm-inner-margin-min 0 @switch-sm-inner-margin-max;
       font-size: @font-size-sm;
     }
 
-    &::after {
-      width: @switch-sm-height - 4px;
-      height: @switch-sm-height - 4px;
+    .@{switch-prefix-cls}-handle {
+      width: @switch-sm-pin-size;
+      height: @switch-sm-pin-size;
     }
 
-    &:active::before,
-    &:active::after {
-      width: 16px;
+    .@{switch-prefix-cls}-loading-icon {
+      transform: translate(-50%, -50%) scale(0.66667);
     }
-  }
 
-  &-small &-loading-icon {
-    width: @switch-sm-height - 4px;
-    height: @switch-sm-height - 4px;
-  }
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-inner {
+        margin: 0 @switch-sm-inner-margin-max 0 @switch-sm-inner-margin-min;
+      }
 
-  &-small&-checked {
-    .@{switch-prefix-cls}-inner {
-      margin-right: 18px;
-      margin-left: 3px;
-    }
-  }
-
-  &-small&-checked &-loading-icon {
-    left: 100%;
-    margin-left: @switch-sm-checked-margin-left;
-  }
-
-  &-small&-loading &-loading-icon {
-    font-weight: bold;
-    // animation: AntSwitchSmallLoadingCircle 1s infinite linear;
-    transform: scale(0.66667);
-  }
-
-  &-checked {
-    background-color: @switch-color;
-
-    .@{switch-prefix-cls}-inner {
-      margin-right: @switch-inner-margin-max;
-      margin-left: @switch-inner-margin-min;
+      .@{switch-prefix-cls}-handle {
+        left: calc(100% - @switch-sm-pin-size - @switch-padding);
+      }
     }
-
-    &::after {
-      left: 100%;
-      margin-left: -1px;
-      transform: translateX(-100%);
-    }
-  }
-
-  &-checked &-loading-icon {
-    left: 100%;
-    margin-left: -19px;
-  }
-
-  &-loading,
-  &-disabled {
-    cursor: not-allowed;
-    opacity: @switch-disabled-opacity;
-    * {
-      cursor: not-allowed;
-    }
-    &::before,
-    &::after {
-      cursor: not-allowed;
-    }
-  }
-}
-
-@keyframes AntSwitchSmallLoadingCircle {
-  0% {
-    transform: rotate(0deg) scale(0.66667);
-    transform-origin: 50% 50%;
-  }
-  100% {
-    transform: rotate(360deg) scale(0.66667);
-    transform-origin: 50% 50%;
   }
 }
 
diff --git a/components/switch/style/rtl.less b/components/switch/style/rtl.less
index d659e1ffceea..0a5d52b587b0 100644
--- a/components/switch/style/rtl.less
+++ b/components/switch/style/rtl.less
@@ -1,73 +1,50 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
+@import './index';
 
 @switch-prefix-cls: ~'@{ant-prefix}-switch';
 
-.@{switch-prefix-cls} {
-  &-rtl {
-    direction: rtl;
-  }
+.@{switch-prefix-cls}-rtl {
+  direction: rtl;
 
-  &-inner {
-    .@{switch-prefix-cls}-rtl & {
-      margin-right: @switch-inner-margin-max;
-      margin-left: @switch-inner-margin-min;
-    }
+  .@{switch-prefix-cls}-inner {
+    margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
   }
 
-  &-loading-icon,
-  &::after {
-    .@{switch-prefix-cls}-rtl& {
-      left: 100%;
-      margin-left: -1px;
-      transform: translateX(-100%);
-    }
+  .@{switch-prefix-cls}-handle {
+    right: @switch-padding;
+    left: auto;
   }
 
-  &-small {
-    .@{switch-prefix-cls}-inner {
-      .@{switch-prefix-cls}-rtl& {
-        margin-right: 18px;
-        margin-left: 3px;
-      }
+  &:not(&-disabled):active {
+    .@{switch-prefix-cls}-handle::before {
+      right: 0;
+      left: -30%;
     }
-  }
 
-  &-small &-loading-icon {
-    .@{switch-prefix-cls}-rtl& {
-      margin-left: 12px;
-    }
-  }
-
-  &-small&-checked {
-    .@{switch-prefix-cls}-inner {
-      .@{switch-prefix-cls}-rtl& {
-        margin-right: 3px;
-        margin-left: 18px;
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-handle::before {
+        right: -30%;
+        left: 0;
       }
     }
   }
 
-  &-checked {
+  &.@{switch-prefix-cls}-checked {
     .@{switch-prefix-cls}-inner {
-      .@{switch-prefix-cls}-rtl& {
-        margin-right: @switch-inner-margin-min;
-        margin-left: @switch-inner-margin-max;
-      }
+      margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
     }
 
-    &::after {
-      .@{switch-prefix-cls}-rtl& {
-        left: 1px;
-        margin-left: 0;
-        transform: translateX(0);
-      }
+    .@{switch-prefix-cls}-handle {
+      right: calc(100% - @switch-pin-size - @switch-padding);
     }
   }
 
-  &-checked &-loading-icon {
-    .@{switch-prefix-cls}-rtl& {
-      margin-left: -41px;
+  &.@{switch-prefix-cls}-small {
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-handle {
+        right: calc(100% - @switch-sm-pin-size - @switch-padding);
+      }
     }
   }
 }
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 703f593e3c60..f1c28583b982 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -1583,6 +1583,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -1619,6 +1622,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -1655,6 +1661,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -1687,11 +1696,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           >
             <button
               aria-checked="true"
-              checked=""
               class="ant-switch ant-switch-checked"
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -1724,11 +1735,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           >
             <button
               aria-checked="true"
-              checked=""
               class="ant-switch ant-switch-checked"
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -1761,11 +1774,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           >
             <button
               aria-checked="true"
-              checked=""
               class="ant-switch ant-switch-checked"
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -1798,11 +1813,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           >
             <button
               aria-checked="true"
-              checked=""
               class="ant-switch ant-switch-checked"
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -1839,6 +1856,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -1871,11 +1891,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
           >
             <button
               aria-checked="true"
-              checked=""
               class="ant-switch ant-switch-checked"
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
@@ -1912,6 +1934,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
               role="switch"
               type="button"
             >
+              <div
+                class="ant-switch-handle"
+              />
               <span
                 class="ant-switch-inner"
               />
diff --git a/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap b/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
index 7c74c58ac7ea..718c3d35eed2 100644
--- a/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
+++ b/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
@@ -55,6 +55,9 @@ exports[`Tooltip should hide when mouse leave antd disabled component Switch 1`]
     style="pointer-events: none;"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
diff --git a/components/transfer/__tests__/__snapshots__/demo.test.js.snap b/components/transfer/__tests__/__snapshots__/demo.test.js.snap
index b3e3dcb840b1..91355a89d1bf 100644
--- a/components/transfer/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/transfer/__tests__/__snapshots__/demo.test.js.snap
@@ -1005,6 +1005,9 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
     style="margin-top:16px"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     >
@@ -3236,6 +3239,9 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
     style="margin-top:16px"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     >
@@ -3249,6 +3255,9 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
     style="margin-top:16px"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     >
diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap
index cfdd930afdea..07562126ab2c 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -1777,11 +1777,13 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
     showLine: 
     <button
       aria-checked="true"
-      checked=""
       class="ant-switch ant-switch-checked"
       role="switch"
       type="button"
     >
+      <div
+        class="ant-switch-handle"
+      />
       <span
         class="ant-switch-inner"
       />
@@ -1795,6 +1797,9 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
       role="switch"
       type="button"
     >
+      <div
+        class="ant-switch-handle"
+      />
       <span
         class="ant-switch-inner"
       />
diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.js.snap
index 4dace21b4728..9dabed204a35 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.js.snap
@@ -190,11 +190,13 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
 <div>
   <button
     aria-checked="true"
-    checked=""
     class="ant-switch ant-switch-checked"
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     >
@@ -207,6 +209,9 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
@@ -217,6 +222,9 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
@@ -227,6 +235,9 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
     role="switch"
     type="button"
   >
+    <div
+      class="ant-switch-handle"
+    />
     <span
       class="ant-switch-inner"
     />
diff --git a/package.json b/package.json
index a8957e1847f3..b3a1ec4ebc95 100644
--- a/package.json
+++ b/package.json
@@ -134,7 +134,7 @@
     "rc-select": "~10.3.0",
     "rc-slider": "~9.2.3",
     "rc-steps": "~3.6.0",
-    "rc-switch": "~3.0.0",
+    "rc-switch": "~3.1.0",
     "rc-table": "~7.5.3",
     "rc-tabs": "~10.1.1",
     "rc-tooltip": "~4.0.2",