Switch: use CSS to process button position (#10879)

* switch transformx value not flexiable

* add -1px for button

packages/switch/src/component.vue

@@ -26,7 +26,6 @@
       <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
     </span>
     <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
-      <span class="el-switch__button" :style="{ transform }"></span>
     </span>
     <span
       :class="['el-switch__label', 'el-switch__label--right', checked ? 'is-active' : '']"
@@ -107,9 +106,6 @@
       checked() {
         return this.value === this.activeValue;
       },
-      transform() {
-        return this.checked ? `translate3d(${ this.coreWidth - 20 }px, 0, 0)` : '';
-      },
       switchDisabled() {
         return this.disabled || (this.elForm || {}).disabled;
       }

packages/theme-chalk/src/switch.scss

@@ -69,12 +69,13 @@
     transition: border-color .3s, background-color .3s;
     vertical-align: middle;
 
-    & .el-switch__button {
+    &:after {
+      content: "";
       position: absolute;
       top: 1px;
       left: 1px;
       border-radius: $--border-radius-circle;
-      transition: transform .3s;
+      transition: all .3s;
       width: $--switch-button-size;
       height: $--switch-button-size;
       background-color: $--color-white;
@@ -85,6 +86,10 @@
     .el-switch__core {
       border-color: $--switch-on-color;
       background-color: $--switch-on-color;
+      &::after {
+        left: 100%;
+        margin-left: -$--switch-button-size - 1px;
+      }
     }
   }