fix demo

components/badge/Badge.vue

@@ -6,15 +6,17 @@
     </template>
     <template v-else>
       <slot></slot>
-      <scroll-number
-        v-if="!badgeStatus.isHidden"
-        :prefixCls="scrollNumberPrefixCls"
-        :className="badgeComputedCls.scrollNumberCls"
-        :count="badgeStatus.stateCount"
-        :titleNumber="count"
-        :styleNumber="styles"
-        >
-      </scroll-number>
+      <transition appear :name="transitionName">
+        <scroll-number
+          v-if="!badgeStatus.isHidden"
+          :prefixCls="scrollNumberPrefixCls"
+          :className="badgeComputedCls.scrollNumberCls"
+          :count="badgeStatus.stateCount"
+          :titleNumber="count"
+          :styleNumber="styles"
+          >
+        </scroll-number>
+      </transition>
       <span
         v-if="!badgeStatus.isHidden && text"
         :class="[prefixCls+'-status-text']">
@@ -70,8 +72,11 @@ export default {
     },
   },
   data () {
+    const { prefixCls, $slots } = this
+    const isHasDefaultSlot = $slots && !!$slots.default
     return {
-      isHasDefaultSlot: this.$slots && !!this.$slots.default,
+      isHasDefaultSlot,
+      transitionName: isHasDefaultSlot ? `${prefixCls}-zoom` : '',
     }
   },
   computed: {
@@ -99,7 +104,7 @@ export default {
       }
     },
     badgeStatus () {
-      const { count, overflowCount, showZero, dot, text, status } = this
+      const { count, overflowCount, showZero, dot, text } = this
       let stateCount = +count > +overflowCount ? `${overflowCount}+` : count
       const isDot = dot || text
       if (isDot) {
@@ -113,9 +118,6 @@ export default {
         isHidden,
       }
     },
-  },
-  methods: {
-
   },
   components: {
     Icon,

components/badge/ScrollNumber.vue

@@ -1,10 +1,13 @@
-<template>
-  <sup :class="[prefixCls, className]" :title="titleNumber" :style="styleNumber">
-    <!-- <span v-if="!count || isNaN(count)">{{count}}</span> -->
-    <span>{{count}}</span>
-  </sup>
-</template>
 <script>
+import StateMixin from '../_util/StateMixin'
+
+function getNumberArray (num) {
+  return num
+    ? num.toString()
+      .split('')
+      .reverse()
+      .map(i => Number(i)) : []
+}
 export default {
   name: 'ScrollNumber',
   props: {
@@ -17,18 +20,108 @@ export default {
       default: () => ({}),
     },
   },
+  mixins: [StateMixin],
   data () {
+    const { count } = this
     return {
-
+      animateStarted: true,
+      lastCount: 0,
+      stateCount: count,
     }
   },
-  computed: {
-
+  watch: {
+    count (newValue, oldValue) {
+      // 复原数字初始位置
+      this.setState({
+        animateStarted: true,
+        lastCount: oldValue,
+      }, () => {
+        // 等待数字位置复原完毕
+        // 开始设置完整的数字
+        setTimeout(() => {
+          this.setState({
+            animateStarted: false,
+            stateCount: newValue,
+          })
+        }, 30)
+      })
+    },
   },
   methods: {
-
+    getPositionByNum (num, i) {
+      const { animateStarted, lastCount, stateCount } = this
+      if (animateStarted) {
+        return 10 + num
+      }
+      const currentDigit = getNumberArray(stateCount)[i]
+      const lastDigit = getNumberArray(lastCount)[i]
+      // 同方向则在同一侧切换数字
+      if (stateCount > lastCount) {
+        if (currentDigit >= lastDigit) {
+          return 10 + num
+        }
+        return 20 + num
+      }
+      if (currentDigit <= lastDigit) {
+        return 10 + num
+      }
+      return num
+    },
+    renderNumberList (position) {
+      const childrenArr = new Array(30).fill(1)
+      const childrenHtml = childrenArr.map((item, i) => {
+        const currentClassName = (position === i) ? 'current' : ''
+        return <p key={i.toString()} class={currentClassName}>{i % 10}</p>
+      })
+      return childrenHtml
+    },
+    renderCurrentNumber (num, i) {
+      const { animateStarted, prefixCls } = this
+      const position = this.getPositionByNum(num, i)
+      let removeTransition = animateStarted ||
+        (getNumberArray(this.lastCount)[i] === undefined)
+      if (!removeTransition) {
+        removeTransition = ''
+      }
+      const styleSpan = {
+        transition: `${removeTransition}` && 'none',
+        msTransform: `translateY(${-position * 100}%)`,
+        WebkitTransform: `translateY(${-position * 100}%)`,
+        transform: `translateY(${-position * 100}%)`,
+      }
+      return (
+        <span
+          key={i}
+          class={`${prefixCls}-only`}
+          style = {styleSpan}
+        >
+          {
+            this.renderNumberList(position)
+          }
+        </span>
+      )
+    },
+    renderNumberElement () {
+      const { stateCount } = this
+      if (!stateCount || isNaN(Number(stateCount))) {
+        return stateCount
+      }
+      return getNumberArray(stateCount)
+        .map((num, i) => this.renderCurrentNumber(num, i)).reverse()
+    },
   },
-  components: {
+  render () {
+    const { prefixCls, className, titleNumber, styleNumber } = this
+    return (
+      <sup
+        class={[prefixCls, className]}
+        title={titleNumber}
+        style={styleNumber}>
+        {
+          this.renderNumberElement()
+        }
+      </sup>
+    )
   },
 }
 </script>

components/badge/demo/index.vue

@@ -1,5 +1,49 @@
 <template>
   <div>
+    基本：
+    <div>
+      <Badge count=5>
+        <a href="#" class="head-example" />
+      </Badge>
+      <Badge count=0 showZero>
+        <a href="#" class="head-example" />
+      </Badge>
+    </div>
+    <br>
+    独立使用：
+    <div>
+      <Badge count=25 />
+      <Badge count=4 :styles="{backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset'}" />
+      <Badge count=109 :styles= "{backgroundColor: '#52c41a'} " />
+    </div>
+    <br>
+    封顶数字：
+    <div style="margin-top: 10px">
+      <Badge count=99>
+        <a href="#" class="head-example" />
+      </Badge>
+      <Badge count=100>
+        <a href="#" class="head-example" />
+      </Badge>
+      <Badge count=99 overflowCount=10>
+        <a href="#" class="head-example" />
+      </Badge>
+      <Badge count=1000 overflowCount=999>
+        <a href="#" class="head-example" />
+      </Badge>
+    </div>
+    <br>
+     讨嫌的小红点：
+    <div style="margin-top: 10px">
+      <Badge dot>
+        <Icon type="notification" />
+      </Badge>
+      <Badge dot>
+        <a href="#">Link something</a>
+      </Badge>
+    </div>
+    <br>
+    状态点：
     <div>
       <Badge status="success" />
       <Badge status="error" />
@@ -19,12 +63,17 @@
       <Badge status="warning" text="Warning" />
     </div>
     <br />
+    动态：
     <div>
       <Badge :count="count">
         <a href="#" class="head-example" />
       </Badge>
-      <ant-button @click="changeValue(1)">增加</ant-button>
-      <ant-button @click="changeValue(-1)">减少</ant-button>
+      <ant-button @click="changeMinsValue()">
+        <Icon type="minus" />
+      </ant-button>
+      <ant-button @click="changePlusValue(1)">
+        <Icon type="plus" />
+      </ant-button>
       <br/>
       <Badge :dot="isShow">
         <a href="#" class="head-example" />
@@ -36,12 +85,13 @@
 </template>
 <script>
 import '../style'
-import { Badge, Button } from 'antd/index'
+let i = 0
+import { Badge, Button, Icon } from 'antd/index'
 export default {
   data () {
     return {
       currentStatus: 'warning',
-      count: 98,
+      count: 3,
       isShow: true,
     }
   },
@@ -49,8 +99,22 @@ export default {
     changeStatus () {
       this.currentStatus = 'processing'
     },
-    changeValue (val) {
-      this.count = this.count + val
+    changeMinsValue () {
+      i++
+      console.dir(i)
+      let count = this.count - 1
+      if (count < 0) {
+        count = 0
+      }
+      this.count = count
+    },
+    changePlusValue () {
+      setInterval(() => {
+        const count = this.count + 1
+        this.count = count
+      }, 300)
+      // const count = this.count + 1
+      // this.count = count
     },
     changeShow () {
       this.isShow = !this.isShow
@@ -59,6 +123,7 @@ export default {
   components: {
     Badge,
     AntButton: Button,
+    Icon,
   },
 }
 </script>
@@ -70,4 +135,7 @@ export default {
     background: #eee;
     display: inline-block;
   }
+  .ant-badge{
+    margin-right: 20px;
+  }
 </style>

components/badge/style/index.less

@@ -91,12 +91,12 @@
   }
 
   &-zoom-appear,
-  &-zoom-enter {
+  &-zoom-enter-active {
     animation: antZoomBadgeIn .3s @ease-out-back;
     animation-fill-mode: both;
   }
 
-  &-zoom-leave {
+  &-zoom-leave-active {
     animation: antZoomBadgeOut .3s @ease-in-back;
     animation-fill-mode: both;
   }
@@ -135,26 +135,23 @@
 @keyframes antZoomBadgeIn {
   0% {
     opacity: 0;
-    transform: scale(0) translateX(-50%);
+    transform-origin: 100% 50%;
+    transform: scale(0) translateX(50%);
   }
   100% {
-    transform: scale(1) translateX(-50%);
+    transform-origin: 100% 50%;
+    transform: scale(1) translateX(50%);
   }
 }
 
 @keyframes antZoomBadgeOut {
   0% {
-    transform: scale(1) translateX(-50%);
+    transform-origin: 100% 50%;
+    transform: scale(1) translateX(50%);
   }
   100% {
     opacity: 0;
-    transform: scale(0) translateX(-50%);
+    transform-origin: 100% 50%;
+    transform: scale(0) translateX(50%);
   }
 }
-
-.fade-enter-active, .fade-leave-active {
-  transition: opacity 3s;
-}
-.fade-enter, .fade-leave-to {
-  opacity: 0;
-}

components/rate/demo/index.vue

@@ -32,7 +32,7 @@
       <Icon type="heart" />
     </Rate>
     </br>
-    <Rate :value="initValue" :allowHalf="allowHalf" character="A"></Rate>
+    <Rate :defaultValue="initValue" :allowHalf="allowHalf" character="A"></Rate>
     </br>
     <Rate :value="initValue"  character="好"></Rate>
   </div>