diff --git a/examples/docs/tabs.md b/examples/docs/tabs.md
index fee838f72..d57149564 100644
--- a/examples/docs/tabs.md
+++ b/examples/docs/tabs.md
@@ -44,7 +44,7 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta
 下例会选中选项卡2，如果不设置`name`，将`active-name`设为`2`，可以达成相同效果。
 
 <div>
-  <el-tabs>
+  <el-tabs :active-name="activeName">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
     <el-tab-pane name="two" label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -95,7 +95,7 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta
 ```
 
 <div>
-  <el-tabs type="border-card">
+  <el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
     <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
     <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
     <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
@@ -104,7 +104,7 @@ Tabs 组件提供了选项卡功能，只需要使用`el-tabs`和子元素`el-ta
 </div>
 
 ```html
-<el-tabs type="border-card">
+<el-tabs type="card" :closable="true" @tab-remove="handleRemove" @tab-click="handleClick">
   <el-tab-pane label="选项卡一">选项卡一内容</el-tab-pane>
   <el-tab-pane label="选项卡二">选项卡二内容</el-tab-pane>
   <el-tab-pane label="选项卡三">选项卡三内容</el-tab-pane>
diff --git a/packages/tabs/src/tabs.vue b/packages/tabs/src/tabs.vue
index 1ab272ad3..1e6ea1906 100644
--- a/packages/tabs/src/tabs.vue
+++ b/packages/tabs/src/tabs.vue
@@ -1,8 +1,6 @@
 <script>
   import ElTab from './tab';
 
-  function noop() {}
-
   module.exports = {
     name: 'el-tabs',
 
@@ -15,14 +13,6 @@
       tabPosition: String,
       activeName: String,
       closable: false,
-      onRemove: {
-        type: Function,
-        default: noop
-      },
-      onClick: {
-        type: Function,
-        default: noop
-      },
       tabWidth: 0
     },
 
@@ -39,7 +29,8 @@
     watch: {
       activeName: {
         handler(val) {
-          this.currentName = val || this.$children[0].key;
+          var fisrtKey = this.$children[0] && this.$children[0].key || '1';
+          this.currentName = val || fisrtKey;
         }
       },
 
@@ -66,13 +57,13 @@
 
           this.currentName = nextChild ? nextChild.key : prevChild ? prevChild.key : '-1';
         }
-        this.onRemove(tab.key);
+        this.$emit('tab-remove', tab.key);
       },
       handleTabClick(tab, event) {
         this.currentName = tab.key;
-        this.onClick(tab.key, event);
+        this.$emit('tab-click', tab.key, event);
       },
-      calcBarStyle() {
+      calcBarStyle(firstRendering) {
         if (this.type || !this.$refs.tabs) return {};
         var style = {};
         var offset = 0;
@@ -92,16 +83,19 @@
         style.width = tabWidth + 'px';
         style.transform = `translateX(${offset}px)`;
 
+        if (!firstRendering) {
+          style.transition = 'transform .3s cubic-bezier(.645,.045,.355,1), -webkit-transform .3s cubic-bezier(.645,.045,.355,1)';
+        }
         this.barStyle = style;
       }
     },
-
     mounted() {
       if (!this.currentName) {
-        this.currentName = this.$children[0].key;
+        var fisrtKey = this.$children[0] && this.$children[0].key || '1';
+        this.currentName = this.activeName || fisrtKey;
       }
       this.$children.forEach(tab => this.tabs.push(tab));
-      this.$nextTick(() => this.calcBarStyle());
+      this.$nextTick(() => this.calcBarStyle(true));
     }
   };
 </script>
diff --git a/packages/theme-default/src/tabs.css b/packages/theme-default/src/tabs.css
index f9c3c99a4..0a38c6bb7 100644
--- a/packages/theme-default/src/tabs.css
+++ b/packages/theme-default/src/tabs.css
@@ -19,7 +19,7 @@
       height: 3px;
       background-color: var(--color-primary);
       z-index: 1;
-      transition: transform .3s cubic-bezier(.645,.045,.355,1);
+      /*transition: transform .3s cubic-bezier(.645,.045,.355,1);*/
       list-style: none;
     }
     @e item {