diff --git a/docs/examples/switch.md b/docs/examples/switch.md
index 400912c95..b77773cb3 100644
--- a/docs/examples/switch.md
+++ b/docs/examples/switch.md
@@ -43,13 +43,17 @@ export default {
 :::demo 样例代码
 ```html
 <div class="page-switch">
-  <div class="page-switch-wrapper">
+  <div class="page-switch__wrapper">
     <o2-switch class="some-customized-class" :checked="switchState" :on-change="updateState"></o2-switch>
-    <div class="page-switch-text">{{switchStateText}}</div>
+    <div class="page-switch__text">{{switchStateText}}</div>
   </div>
-  <div class="page-switch-wrapper">
+  <div class="page-switch__wrapper">
     <o2-switch class="some-customized-class" :checked="true" :disabled="true"></o2-switch>
-    <div class="page-switch-text">OFF, DISABLED</div>
+    <div class="page-switch__text">ON, DISABLED</div>
+  </div>
+  <div class="page-switch__wrapper">
+    <o2-switch class="some-customized-class" :checked="false" :disabled="true"></o2-switch>
+    <div class="page-switch__text">OFF, DISABLED</div>
   </div>
 </div>
 ```
diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index 0b8413dce..d10f30faa 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="o2-switch" :class="['is-' + switchState]" @click="toggleState">
-    <div class="o2-switch-node" :class="['is-' + switchState]"></div>
+  <div class="z-switch" :class="switchState" @click="toggleState">
+    <div class="z-switch__node" :class="switchState"></div>
   </div>
 </template>
 
@@ -39,15 +39,12 @@ export default {
   },
   computed: {
     switchState: function() {
-      if (this.disabled) {
-        return 'disabled';
-      } else if (this.loading) {
-        return 'loading';
-      } else if (this.checked) {
-        return 'on';
-      } else {
-        return 'off';
-      }
+      let switchState = this.checked ? ['is-on'] : ['is-off'];
+
+      if (this.disabled) switchState.push('is-disabled');
+      if (this.loading) switchState.push('is-loading');
+
+      return switchState;
     }
   },
   methods: {
diff --git a/packages/zanui-css/src/switch.pcss b/packages/zanui-css/src/switch.pcss
index 1199114fa..7802cb39a 100644
--- a/packages/zanui-css/src/switch.pcss
+++ b/packages/zanui-css/src/switch.pcss
@@ -17,28 +17,23 @@
       box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
       @when on {
         left: 0;
+        transition: all .5s ease-in-out;
       }
 
       @when off {
-        right: 0;
+        left: 20px;
+        transition: all .5s ease-in-out;
       }
-
     }
 
     @when on {
       background-color: #44db5e;
       border-color: #44db5e;
-      @descendent node {
-        left: 0;
-      }
     }
 
     @when off {
       background-color: #fff;
       border-color: rgba(0, 0, 0, .1);
-      @descendent node {
-        right: 0;
-      }
     }
 
     @when loading {
@@ -46,8 +41,13 @@
     }
 
     @when disabled {
-      background-color: #f2f2f2;
-      border-color: rgba(0, 0, 0, .1);
+      @when off {
+        background-color: #f2f2f2;
+        border-color: rgba(0, 0, 0, .1);
+      }
+      @when on {
+        background-color: #a6e7b1;
+      }
     }
   }
 }