fixed #1881

examples/routers/message.vue

@@ -38,10 +38,10 @@
             }
         },
         mounted () {
-            this.$Message.config({
-                top: 50,
-                duration: 3
-            });
+//            this.$Message.config({
+//                top: 50,
+//                duration: 3
+//            });
         }
     }
 </script>

src/components/base/notification/notice.vue

@@ -1,5 +1,5 @@
 <template>
-    <transition :name="transitionName">
+    <transition :name="transitionName" @enter="handleEnter" @leave="handleLeave">
         <div :class="classes" :style="styles">
             <template v-if="type === 'notice'">
                 <div :class="[baseClass + '-content']" ref="content" v-html="content"></div>
@@ -96,6 +96,18 @@
                 this.clearCloseTimer();
                 this.onClose();
                 this.$parent.close(this.name);
+            },
+            handleEnter (el) {
+                if (this.type === 'message') {
+                    el.style.height = el.scrollHeight + 'px';
+                }
+            },
+            handleLeave (el) {
+                if (this.type === 'message') {
+                    el.style.height = 0;
+                    el.style.paddingTop = 0;
+                    el.style.paddingBottom = 0;
+                }
             }
         },
         mounted () {

src/styles/components/message.less

@@ -13,6 +13,8 @@
     &-notice {
         padding: 8px;
         text-align: center;
+        transition: height @animation-time @ease-in-out, padding @animation-time @ease-in-out;
+
         &:first-child {
           margin-top: -8px;
         }