feat(badge): better animation and bug fix

demo/documentation/components/badge/enUS/basic.md

@@ -27,7 +27,7 @@
 export default {
   data() {
     return {
-      value: 0
+      value: 10
     };
   }
 };

packages/common/Badge/src/ScrollNumber.vue

@@ -1,8 +1,7 @@
 <template>
   <transition
-    name="n-fade-up-width-expand"
+    :name="isNotNumber ? 'n-fade-in-width-expand' : 'n-fade-up-width-expand'"
     :appear="appeared"
-    @enter="handleEnter"
   >
     <span
       ref="numbers"
@@ -25,8 +24,8 @@
           ref="numberWrapper"
           class="n-scroll-number-current-number__inner"
           :class="{
-            'n-scroll-number-current-number__inner--slide-in':
-              true
+            'n-scroll-number-current-number__inner--not-number':
+              isNotNumber
           }"
         >{{ newNumber }}</span>
       </span>
@@ -77,6 +76,9 @@ export default {
     },
     styleMaxWidth () {
       return this.maxWidth ? `${this.maxWidth}px` : null
+    },
+    isNotNumber () {
+      return !(typeof this.value === 'number')
     }
   },
   watch: {

packages/common/Badge/src/ScrollNumbers.vue

@@ -3,11 +3,6 @@
     v-if="valueIsNumber"
     class="n-scroll-numbers"
   >
-    <scroll-number
-      v-if="max && max < value"
-      :appeared="appeared"
-      :value="'+'"
-    />
     <scroll-number
       v-for="(number, i) in numbers"
       :key="numbers.length - i - 1"
@@ -16,6 +11,11 @@
       :new-original-number="newValue"
       :value="number"
     />
+    <scroll-number
+      v-if="max && max < value"
+      :appeared="appeared"
+      :value="'+'"
+    />
   </span>
   <span
     v-else

styles/Badge.scss

@@ -45,28 +45,29 @@
   }
 }
 
-@keyframes n-number-slide-in {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
+// @keyframes n-number-slide-in {
+//   from {
+//     transform: translateX(-100%);
+//   }
+//   to {
+//     transform: translateX(0);
+//   }
+// }
 
-@keyframes n-number-slide-out {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(-100%);
-  }
-}
+// @keyframes n-number-slide-out {
+//   from {
+//     transform: translateX(0);
+//   }
+//   to {
+//     transform: translateX(-100%);
+//   }
+// }
 
 @include b(scroll-numbers) {
   white-space: nowrap;
   @include b(scroll-number) {
     @include fade-up-width-expand-transition($duration: .2s);
+    @include fade-in-width-expand-transition($duration: .2s, $delay: 0s);
     display: inline-block;
     position: relative;
     height: 18px;
@@ -112,6 +113,10 @@
         position: absolute;
         right: 0;
         top: 0;
+        @include m(not-number) {
+          right: unset;
+          left: 0;
+        }
       }
     }
   }

styles/themes/vars.scss

@@ -396,10 +396,10 @@ $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
 
 @mixin fade-up-width-expand-transition($block: "fade-up-width-expand", $duration: .2s) {
   &.#{$namespace}-#{$block}-leave-active {
-    transition: opacity $duration $default-cubic-bezier, max-width $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
+    transition: opacity $duration $fast-in-cubic-bezier, max-width $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
   }
   &.#{$namespace}-#{$block}-enter-active {
-    transition: opacity $duration $default-cubic-bezier, max-width $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
+    transition: opacity $duration $fast-in-cubic-bezier, max-width $duration $fast-in-cubic-bezier, transform $duration $fast-in-cubic-bezier;
   }
   &.#{$namespace}-#{$block}-enter-to {
     opacity: 1;