normalize transition class name

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"

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' }"

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="{

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' }"

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' }"

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'}"

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>

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>

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>

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">

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">

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}]">

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,
+.el-fade-in-enter-active,
-.fade-in-leave-active {
+.el-fade-in-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-
+.el-fade-in-enter,
-.fade-in-enter,
+.el-fade-in-leave-active {
-.fade-in-leave-active {
   opacity: 0;
 }
 
-.md-fade-center-enter-active,
+.el-zoom-in-center-enter-active,
-.md-fade-center-leave-active {
+.el-zoom-in-center-leave-active {
   transition: all .3s cubic-bezier(.55,0,.1,1);
 }
-.md-fade-center-enter,
+.el-zoom-in-center-enter,
-.md-fade-center-leave,
+.el-zoom-in-center-leave-active {
-.md-fade-center-leave-active {
   opacity: 0;
-  transform: scaleY(0);
+  transform: scaleX(0);
 }
 
-.md-fade-bottom-enter-active,
+.el-zoom-in-top-enter-active,
-.md-fade-bottom-leave-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,
+.el-zoom-in-top-enter,
-.md-fade-bottom-leave,
+.el-zoom-in-top-leave-active {
-.md-fade-bottom-leave-active {
   opacity: 0;
   transform: scaleY(0);
 }
 
-.md-fade-top-enter-active,
+.el-zoom-in-bottom-enter-active,
-.md-fade-top-leave-active {
+.el-zoom-in-bottom-leave-active {
   opacity: 1;
   transform: scaleY(1);
   transition: var(--md-fade-transition);
   transform-origin: center bottom;
 }
-
+.el-zoom-in-bottom-enter,
-.md-fade-top-enter,
+.el-zoom-in-bottom-leave-active {
-.md-fade-top-leave,
-.md-fade-top-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);
-}*/

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>