From 7a85d55f31c08bab49601c83f314f350f1a1c2ba Mon Sep 17 00:00:00 2001
From: baiyaaaaa <bigpet1991@gmail.com>
Date: Sat, 3 Dec 2016 18:59:04 +0800
Subject: [PATCH] normalize transition class name

---
 packages/autocomplete/src/autocomplete.vue    |  2 +-
 packages/date-picker/src/panel/date-range.vue |  2 +-
 packages/date-picker/src/panel/date.vue       |  2 +-
 packages/date-picker/src/panel/time-range.vue |  2 +-
 .../date-picker/src/panel/time-select.vue     |  2 +-
 packages/date-picker/src/panel/time.vue       |  2 +-
 packages/dropdown/src/dropdown-menu.vue       |  2 +-
 packages/form/src/form-item.vue               |  2 +-
 packages/menu/src/submenu.vue                 |  2 +-
 packages/select/src/select.vue                |  2 +-
 packages/table/src/filter-panel.vue           |  2 +-
 packages/tag/src/tag.vue                      |  2 +-
 .../theme-default/src/common/transition.css   | 90 ++++---------------
 packages/upload/src/cover.vue                 |  6 +-
 14 files changed, 32 insertions(+), 88 deletions(-)

diff --git a/packages/autocomplete/src/autocomplete.vue b/packages/autocomplete/src/autocomplete.vue
index c0fee502c..e23c637ad 100644
--- a/packages/autocomplete/src/autocomplete.vue
+++ b/packages/autocomplete/src/autocomplete.vue
@@ -19,7 +19,7 @@
         <slot name="append"></slot>
       </template> 
     </el-input>
-    <transition name="md-fade-bottom">
+    <transition name="el-zoom-in-top">
       <ul
         v-if="suggestionVisible"
         class="el-autocomplete__suggestions"
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
index 2d4a03aa8..59d3071d8 100644
--- a/packages/date-picker/src/panel/date-range.vue
+++ b/packages/date-picker/src/panel/date-range.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
       :style="{ width: width + 'px' }"
diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
index 9547bf1fe..d6d13d7de 100644
--- a/packages/date-picker/src/panel/date.vue
+++ b/packages/date-picker/src/panel/date.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
       :style="{
diff --git a/packages/date-picker/src/panel/time-range.vue b/packages/date-picker/src/panel/time-range.vue
index 1c1c7abfb..1cf08251a 100644
--- a/packages/date-picker/src/panel/time-range.vue
+++ b/packages/date-picker/src/panel/time-range.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
       :style="{ width: width + 'px' }"
diff --git a/packages/date-picker/src/panel/time-select.vue b/packages/date-picker/src/panel/time-select.vue
index 00655836b..4179a1bec 100644
--- a/packages/date-picker/src/panel/time-select.vue
+++ b/packages/date-picker/src/panel/time-select.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
       :style="{ width: width + 'px' }"
diff --git a/packages/date-picker/src/panel/time.vue b/packages/date-picker/src/panel/time.vue
index fe31070b3..91f69a383 100644
--- a/packages/date-picker/src/panel/time.vue
+++ b/packages/date-picker/src/panel/time.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="$emit('dodestroy')">
+  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="currentVisible"
       :style="{width: width + 'px'}"
diff --git a/packages/dropdown/src/dropdown-menu.vue b/packages/dropdown/src/dropdown-menu.vue
index 6ca5bf839..1c6567d4f 100644
--- a/packages/dropdown/src/dropdown-menu.vue
+++ b/packages/dropdown/src/dropdown-menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom" @after-leave="doDestroy">
+  <transition name="el-zoom-in-top" @after-leave="doDestroy">
     <ul class="el-dropdown-menu" v-show="showPopper">
       <slot></slot>
     </ul>
diff --git a/packages/form/src/form-item.vue b/packages/form/src/form-item.vue
index e7f2bb74c..5944dc19b 100644
--- a/packages/form/src/form-item.vue
+++ b/packages/form/src/form-item.vue
@@ -9,7 +9,7 @@
     </label>
     <div class="el-form-item__content" v-bind:style="contentStyle">
       <slot></slot>
-      <transition name="md-fade-bottom">
+      <transition name="el-zoom-in-top">
         <div class="el-form-item__error" v-if="validateState === 'error'">{{validateMessage}}</div>
       </transition>
     </div>
diff --git a/packages/menu/src/submenu.vue b/packages/menu/src/submenu.vue
index 38af0e0c1..ea90f7a3a 100644
--- a/packages/menu/src/submenu.vue
+++ b/packages/menu/src/submenu.vue
@@ -16,7 +16,7 @@
         }">
       </i>
     </div>
-    <transition :name="rootMenu.mode === 'horizontal' ? 'md-fade-bottom' : ''">
+    <transition :name="rootMenu.mode === 'horizontal' ? 'el-zoom-in-top' : ''">
       <ul class="el-menu" v-show="opened"><slot></slot></ul>
     </transition>
   </li>
diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
index 4f6fb5cc1..721560620 100644
--- a/packages/select/src/select.vue
+++ b/packages/select/src/select.vue
@@ -59,7 +59,7 @@
       @mouseleave.native="inputHovering = false"
       :icon="iconClass">
     </el-input>
-    <transition name="md-fade-bottom" @after-leave="doDestroy">
+    <transition name="el-zoom-in-top" @after-leave="doDestroy">
       <el-select-menu
         ref="popper"
         v-show="visible && emptyText !== false">
diff --git a/packages/table/src/filter-panel.vue b/packages/table/src/filter-panel.vue
index 68995dc3c..8f8c31e29 100644
--- a/packages/table/src/filter-panel.vue
+++ b/packages/table/src/filter-panel.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition name="md-fade-bottom">
+  <transition name="el-zoom-in-top">
     <div class="el-table-filter" v-if="multiple" v-show="showPopper">
       <div class="el-table-filter__content">
         <el-checkbox-group class="el-table-filter__checkbox-group" v-model="filteredValue">
diff --git a/packages/tag/src/tag.vue b/packages/tag/src/tag.vue
index 1852d4c3b..40239c0de 100644
--- a/packages/tag/src/tag.vue
+++ b/packages/tag/src/tag.vue
@@ -1,5 +1,5 @@
 <template>
-  <transition :name="closeTransition ? '' : 'md-fade-center'">
+  <transition :name="closeTransition ? '' : 'el-zoom-in-center'">
     <span
       class="el-tag"
       :class="[type ? 'el-tag--' + type : '', {'is-hit': hit}]">
diff --git a/packages/theme-default/src/common/transition.css b/packages/theme-default/src/common/transition.css
index bc522d3ff..19b047226 100644
--- a/packages/theme-default/src/common/transition.css
+++ b/packages/theme-default/src/common/transition.css
@@ -5,109 +5,53 @@
 .fade-in-linear-leave-active {
   transition: var(--fade-linear-transition);
 }
-
 .fade-in-linear-enter,
 .fade-in-linear-leave,
 .fade-in-linear-leave-active {
   opacity: 0;
 }
 
-.fade-in-enter-active,
-.fade-in-leave-active {
+.el-fade-in-enter-active,
+.el-fade-in-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-
-.fade-in-enter,
-.fade-in-leave-active {
+.el-fade-in-enter,
+.el-fade-in-leave-active {
   opacity: 0;
 }
 
-.md-fade-center-enter-active,
-.md-fade-center-leave-active {
+.el-zoom-in-center-enter-active,
+.el-zoom-in-center-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-.md-fade-center-enter,
-.md-fade-center-leave,
-.md-fade-center-leave-active {
+.el-zoom-in-center-enter,
+.el-zoom-in-center-leave-active {
   opacity: 0;
-  transform: scaleY(0);
+  transform: scaleX(0);
 }
 
-.md-fade-bottom-enter-active,
-.md-fade-bottom-leave-active {
+.el-zoom-in-top-enter-active,
+.el-zoom-in-top-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
   transform-origin: center top;
 }
-.md-fade-bottom-enter,
-.md-fade-bottom-leave,
-.md-fade-bottom-leave-active {
+.el-zoom-in-top-enter,
+.el-zoom-in-top-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-top-enter-active,
-.md-fade-top-leave-active {
+.el-zoom-in-bottom-enter-active,
+.el-zoom-in-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
   transform-origin: center bottom;
 }
-
-.md-fade-top-enter,
-.md-fade-top-leave,
-.md-fade-top-leave-active {
+.el-zoom-in-bottom-enter,
+.el-zoom-in-bottom-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
-
-.md-fade-left-enter-active,
-.md-fade-left-leave-active {
-  opacity: 1;
-  transform: scaleX(1);
-  transition: var(--md-fade-transition);
-  transform-origin: right center;
-}
-.md-fade-left-enter,
-.md-fade-left-leave,
-.md-fade-left-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.md-fade-right-enter-active,
-.md-fade-right-leave-active {
-  opacity: 1;
-  transform: scaleX(1);
-  transition: var(--md-fade-transition);
-  transform-origin: left center;
-}
-.md-fade-right-enter,
-.md-fade-right-leave,
-.md-fade-right-leave-active {
-  opacity: 0;
-  transform: scaleX(0);
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity .3s cubic-bezier(.645,.045,.355,1);
-}
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-
-.list-move, .list-enter-active, .list-leave-active {
-  transition: all .5s cubic-bezier(.55,0,.1,1);
-}
-.list-enter, .list-leave-active {
-  opacity: 0;
-  transform: translate(0, -30px);
-}
-/*.list-leave-active {
-  position: absolute;
-  opacity: 0;
-  transform: scaleY(0.01) translate(30px, 0);
-}*/
diff --git a/packages/upload/src/cover.vue b/packages/upload/src/cover.vue
index 3e2a8c828..1772a441a 100644
--- a/packages/upload/src/cover.vue
+++ b/packages/upload/src/cover.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="el-dragger__cover" @click.stop v-if="image">
-    <transition name="fade-in">
+    <transition name="el-fade-in">
       <el-progress
         class="el-dragger__cover__progress"
         v-if="image.status === 'uploading'"
@@ -16,7 +16,7 @@
       @mouseleave="mouseover = false"
     >
       <img :src="image.url">
-      <transition name="fade-in">
+      <transition name="el-fade-in">
         <div v-show="mouseover" class="el-dragger__cover__interact">
           <div class="el-draggeer__cover__btns">
             <span class="btn" @click="$parent.handleClick()"><i class="el-icon-upload2"></i><span>{{ t('el.upload.continue') }}</span></span>
@@ -25,7 +25,7 @@
           </div>
         </div>
       </transition>
-      <transition name="md-fade-top">
+      <transition name="el-zoom-in-bottom">
         <h4 v-show="mouseover" class="el-dragger__cover__title">{{image.name}}</h4>
       </transition>
     </div>