fix(switch): abnormal loading animation when switching state (#2879)

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
 

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
 

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>

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>

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%)'
     })
   ]),