From a8af23cfca5cadaadef8d82663cc8ba4b80ed8d7 Mon Sep 17 00:00:00 2001
From: XieZongChen <952937570@qq.com>
Date: Mon, 2 May 2022 21:32:23 +0800
Subject: [PATCH] fix(switch): abnormal loading animation when switching state

---
 CHANGELOG.en-US.md                     |  3 +++
 CHANGELOG.zh-CN.md                     |  3 +++
 src/switch/demos/enUS/loading.demo.vue | 31 ++++++++++++++++++++++++-
 src/switch/demos/zhCN/loading.demo.vue | 32 +++++++++++++++++++++++++-
 src/switch/src/styles/index.cssr.ts    |  2 ++
 5 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 6cdcba29e14..5386495c784 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -2,7 +2,10 @@
 
 ## Pending
 
+### Fixes
+
 - Fix `n-menu`'s `dropdown-props` prop can't override `n-dropdown`'s `size` prop, closes [#2868](https://github.com/TuSimple/naive-ui/issues/2868).
+- Fix `n-switch` abnormal loading animation when switching state, closes [#2870](https://github.com/TuSimple/naive-ui/issues/2870)
 
 ## 2.28.2
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 78dc45aa83d..0d5c1f7552b 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -2,7 +2,10 @@
 
 ## Pending
 
+### Fixes
+
 - 修复 `n-menu` 的 `dropdown-props` 无法覆盖 `n-dropdown` 的 `size` 属性，关闭 [#2868](https://github.com/TuSimple/naive-ui/issues/2868)
+- 修复 `n-switch` 切换状态时 loading 动画异常，关闭 [#2870](https://github.com/TuSimple/naive-ui/issues/2870)
 
 ## 2.28.2
 
diff --git a/src/switch/demos/enUS/loading.demo.vue b/src/switch/demos/enUS/loading.demo.vue
index fdfb7128409..4e8e1c2ddca 100644
--- a/src/switch/demos/enUS/loading.demo.vue
+++ b/src/switch/demos/enUS/loading.demo.vue
@@ -3,5 +3,34 @@
 </markdown>
 
 <template>
-  <n-switch loading />
+  <n-space>
+    <n-switch loading />
+    <n-switch
+      :value="activeValue"
+      :loading="loading"
+      @update:value="handleChange"
+    />
+  </n-space>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const activeValue = ref(false)
+    const loading = ref(false)
+    return {
+      activeValue,
+      loading,
+      handleChange (value: boolean) {
+        loading.value = true
+        setTimeout(() => {
+          activeValue.value = value
+          loading.value = false
+        }, 2000)
+      }
+    }
+  }
+})
+</script>
diff --git a/src/switch/demos/zhCN/loading.demo.vue b/src/switch/demos/zhCN/loading.demo.vue
index 61d88adcb06..a54a7ab514c 100644
--- a/src/switch/demos/zhCN/loading.demo.vue
+++ b/src/switch/demos/zhCN/loading.demo.vue
@@ -2,6 +2,36 @@
 # 加载中
 
 </markdown>
+
 <template>
-  <n-switch loading />
+  <n-space>
+    <n-switch loading />
+    <n-switch
+      :value="activeValue"
+      :loading="loading"
+      @update:value="handleChange"
+    />
+  </n-space>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup () {
+    const activeValue = ref(false)
+    const loading = ref(false)
+    return {
+      activeValue,
+      loading,
+      handleChange (value: boolean) {
+        loading.value = true
+        setTimeout(() => {
+          activeValue.value = value
+          loading.value = false
+        }, 2000)
+      }
+    }
+  }
+})
+</script>
diff --git a/src/switch/src/styles/index.cssr.ts b/src/switch/src/styles/index.cssr.ts
index 0960f475cbe..e02d9dc78bc 100644
--- a/src/switch/src/styles/index.cssr.ts
+++ b/src/switch/src/styles/index.cssr.ts
@@ -56,6 +56,8 @@ export default cB('switch', `
     transition: color .3s var(--n-bezier);
   `, [
     iconSwitchTransition({
+      left: '50%',
+      top: '50%',
       originalTransform: 'translateX(-50%) translateY(-50%)'
     })
   ]),