feat(message): icon change transition

demo/documentation/components/message/enUS/modifyContent.md

@@ -36,7 +36,7 @@ export default {
     },
     createMessage() {
       this.message = this.$NMessage[this.type](
-        '' + this.count
+        '' + this.count, { duration: 300000 }
       )
     },
   }

packages/common/Message/src/Message.vue

@@ -5,6 +5,7 @@ import mdAlert from '../../../icons/md-alert'
 import mdInformationCircle from '../../../icons/md-information-circle'
 import mdCloseCircle from '../../../icons/md-close-circle'
 import NBaseLoading from '../../../base/Loading'
+import IconSwitchTransition from '../../../transition/IconSwitchTransition'
 
 export default {
   props: {
@@ -31,19 +32,28 @@ export default {
       if (typeof this.icon === 'function') icon = this.icon(h)
       else icon = h(this.icon)
     } else if (this.type === 'success') {
-      icon = h(mdCheckmarkCircle)
+      icon = h(mdCheckmarkCircle, {
+        key: 'success'
+      })
     } else if (this.type === 'error') {
-      icon = h(mdCloseCircle)
+      icon = h(mdCloseCircle, {
+        key: 'info'
+      })
     } else if (this.type === 'info') {
-      icon = h(mdInformationCircle)
+      icon = h(mdInformationCircle, {
+        key: 'warning'
+      })
     } else if (this.type === 'warning') {
-      icon = h(mdAlert)
+      icon = h(mdAlert, {
+        key: 'error'
+      })
     } else if (this.type === 'loading') {
       icon = h(NBaseLoading, {
         props: {
           theme: this.theme,
           strokeWidth: 6
-        }
+        },
+        key: 'loading'
       })
     }
     return h('div', {
@@ -61,7 +71,9 @@ export default {
             size: 20
           }
         }, [
-          icon
+          h(IconSwitchTransition, [
+            icon
+          ])
         ])
       ]),
       h('div', {

styles/Message.scss

@@ -6,7 +6,7 @@
     background-color: map-get($map: $--message-background-color, $key: $type);
     box-shadow: map-get($map: $--message-box-shadow, $key: $type);
     @include e(icon) {
-      path {
+      @include b(icon) {
         fill: $--message-icon-color;
       }
     }
@@ -63,7 +63,10 @@
         height: 40px;
         line-height: 40px;
         align-items: center;
-        i::before {
+        @include b(icon) {
+          svg {
+            @include icon-switch-transition();
+          }
           font-size: 20px;
         }
       }