refactor(base-slot-machine): using cssr

src/_base/slot-machine/src/SlotMachine.vue

@@ -1,7 +1,7 @@
 <template>
   <span
     v-if="valueIsNumber"
-    class="n-scroll-numbers"
+    class="n-base-slot-machine"
   >
     <slot-machine-number
       v-for="(number, i) in numbers"
@@ -13,13 +13,14 @@
     />
     <slot-machine-number
       v-if="max && max < value"
+      key="+"
       :appeared="appeared"
       :value="'+'"
     />
   </span>
   <span
     v-else
-    class="n-scroll-numbers"
+    class="n-base-slot-machine"
   >
     {{ value }}
   </span>
@@ -27,12 +28,17 @@
 
 <script>
 import SlotMachineNumber from './SlotMachineNumber.vue'
+import usecssr from '../../../_mixins/usecssr.js'
+import styles from './styles/index.js'
 
 export default {
   name: 'NBaseSlotMachine',
   components: {
     SlotMachineNumber
   },
+  mixins: [
+    usecssr(styles)
+  ],
   props: {
     value: {
       type: [Number, String],

src/_base/slot-machine/src/SlotMachineNumber.vue

@@ -2,10 +2,11 @@
   <transition
     :name="isNotNumber ? 'n-fade-in-width-expand-transition' : 'n-fade-up-width-expand-transition'"
     :appear="appeared"
+    @leave="handleLeave"
   >
     <span
       ref="numbers"
-      class="n-scroll-number"
+      class="n-base-slot-machine-number"
       :style="{
         maxWidth: styleMaxWidth,
         width: styleMaxWidth
@@ -13,25 +14,25 @@
     >
       <span
         v-if="oldNumber !== null"
-        class="n-scroll-number-old-number n-scroll-number-old-number--top"
+        class="n-base-slot-machine-old-number n-base-slot-machine-old-number--top"
         :class="oldNumberScrollAnimationClass"
       >{{ oldNumber }}</span>
       <span
-        class="n-scroll-number-current-number"
+        class="n-base-slot-machine-current-number"
         :class="newNumberScrollAnimationClass"
       >
         <span
           ref="numberWrapper"
-          class="n-scroll-number-current-number__inner"
+          class="n-base-slot-machine-current-number__inner"
           :class="{
-            'n-scroll-number-current-number__inner--not-number':
+            'n-base-slot-machine-current-number__inner--not-number':
               isNotNumber
           }"
         >{{ newNumber }}</span>
       </span>
       <span
         v-if="oldNumber !== null"
-        class="n-scroll-number-old-number n-scroll-number-old-number--bottom"
+        class="n-base-slot-machine-old-number n-base-slot-machine-old-number--bottom"
         :class="oldNumberScrollAnimationClass"
       >{{ oldNumber }}</span>
     </span>
@@ -69,13 +70,13 @@ export default {
   },
   computed: {
     newNumberScrollAnimationClass () {
-      return this.active ? `n-scroll-number-current-number--${this.scrollAnimationDirection}-scroll` : null
+      return this.active ? `n-base-slot-machine-current-number--${this.scrollAnimationDirection}-scroll` : null
     },
     oldNumberScrollAnimationClass () {
-      return this.active ? `n-scroll-number-old-number--${this.scrollAnimationDirection}-scroll` : null
+      return this.active ? `n-base-slot-machine-old-number--${this.scrollAnimationDirection}-scroll` : null
     },
     styleMaxWidth () {
-      return this.maxWidth ? `${this.maxWidth}px` : null
+      return this.maxWidth !== null ? `${this.maxWidth}px` : null
     },
     isNotNumber () {
       return !(typeof this.value === 'number')
@@ -89,15 +90,25 @@ export default {
     }
   },
   mounted () {
-    this.maxWidth = this.$refs.numberWrapper.offsetWidth
-  },
-  updated () {
-    this.maxWidth = this.$refs.numberWrapper.offsetWidth
+    if (this.appeared) {
+      this.maxWidth = 0
+      this.$nextTick(() => {
+        void this.$el.offsetWidth
+        this.maxWidth = this.$refs.numberWrapper.offsetWidth
+      })
+    } else {
+      this.maxWidth = this.$refs.numberWrapper.offsetWidth
+    }
   },
   created () {
     this.newNumber = this.value
   },
   methods: {
+    handleLeave () {
+      if (this.isNotNumber) {
+        this.$el.style.maxWidth = 0
+      }
+    },
     scroll () {
       const newOriginalNumber = this.newOriginalNumber
       const oldOriginalNumber = this.oldOriginalNumber
@@ -112,7 +123,7 @@ export default {
       this.scrollAnimationDirection = 'up'
       this.active = false
       this.$nextTick(() => {
-        this.$el.getBoundingClientRect()
+        void this.$el.offsetWidth
         this.active = true
       })
     },
@@ -120,7 +131,7 @@ export default {
       this.scrollAnimationDirection = 'down'
       this.active = false
       this.$nextTick(() => {
-        this.$el.getBoundingClientRect()
+        void this.$el.offsetWidth
         this.active = true
       })
     }

src/_base/slot-machine/src/styles/base.cssr.js

@@ -0,0 +1,140 @@
+import { c, cB, cE, cM } from '../../../../_utils/cssr'
+import fadeInWidthExpandTransition from '../../../../styles/_transitions/fade-in-width-expand'
+import fadeUpWidthExpandTransition from '../../../../styles/_transitions/fade-up-width-expand'
+import commonVariables from '../../../../styles/_common-style/base'
+
+const {
+  easeOutCubicBezier
+} = commonVariables
+
+export default c([
+  c('@keyframes n-base-slot-machine-fade-up-in', {
+    raw: `
+      from {
+        transform: translateY(60%);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    `
+  }),
+  c('@keyframes n-base-slot-machine-fade-down-in', {
+    raw: `
+      from {
+        transform: translateY(-60%);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0);
+        opacity: 1;
+      }
+    `
+  }),
+  c('@keyframes n-base-slot-machine-fade-up-out', {
+    raw: `
+      from {
+        transform: translateY(0%);
+        opacity: 1;
+      }
+      to {
+        transform: translateY(-60%);
+        opacity: 0;
+      }
+    `
+  }),
+  c('@keyframes n-base-slot-machine-fade-down-out', {
+    raw: `
+      from {
+        transform: translateY(0%);
+        opacity: 1;
+      }
+      to {
+        transform: translateY(60%);
+        opacity: 0;
+      }
+    `
+  }),
+  cB('base-slot-machine', {
+    raw: `
+      overflow: hidden;
+      white-space: nowrap;
+      display: inline-block;
+      height: 18px;
+      line-height: 18px;
+    `
+  },
+  [
+    cB('base-slot-machine-number', {
+      raw: `
+        display: inline-block;
+        position: relative;
+        height: 18px;
+      `
+    }, [
+      fadeUpWidthExpandTransition({ duration: '.2s' }),
+      // use 0s, not 0
+      fadeInWidthExpandTransition({ duration: '.2s', delay: '0s' }),
+      cB('base-slot-machine-old-number', {
+        raw: `
+          display: inline-block;
+          opacity: 0;
+          position: absolute;
+          left: 0;
+        `
+      }, [
+        cM('top', {
+          transform: 'translateY(-100%)'
+        }),
+        cM('bottom', {
+          transform: 'translateY(100%)'
+        }),
+        cM('down-scroll', {
+          animation: `n-base-slot-machine-fade-down-out .2s ${easeOutCubicBezier}`,
+          animationIterationCount: 1
+        }),
+        cM('up-scroll', {
+          animation: `n-base-slot-machine-fade-up-out .2s ${easeOutCubicBezier}`,
+          animationIterationCount: 1
+        })
+      ]),
+      cB('base-slot-machine-current-number', {
+        raw: `
+          display: inline-block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          bottom: 0;
+          right: 0;
+          opacity: 1;
+          transform: translateY(0);
+        `
+      }, [
+        cM('down-scroll', {
+          animation: `n-base-slot-machine-fade-down-in .2s ${easeOutCubicBezier}`,
+          animationIterationCount: 1
+        }),
+        cM('up-scroll', {
+          animation: `n-base-slot-machine-fade-up-in .2s ${easeOutCubicBezier}`,
+          animationIterationCount: 1
+        }),
+        cE('inner', {
+          raw: `
+            display: inline-block;
+            position: absolute;
+            right: 0;
+            top: 0;
+          `
+        }, [
+          cM('not-number', {
+            raw: `
+              right: unset;
+              left: 0;
+            `
+          })
+        ])
+      ])
+    ])
+  ])
+])

src/_base/slot-machine/src/styles/index.js

@@ -0,0 +1,7 @@
+import baseStyle from './base.cssr.js'
+
+export default [
+  {
+    CNode: baseStyle
+  }
+]

src/_styles/BaseSlotMachine.scss

@@ -1,109 +0,0 @@
-
-@import './mixins/mixins.scss';
-
-@keyframes n-scroll-number-fade-up-in {
-  from {
-    transform: translateY(60%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes n-scroll-number-fade-down-in {
-  from {
-    transform: translateY(-60%);
-    opacity: 0;
-  }
-  to {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-@keyframes n-scroll-number-fade-up-out {
-  from {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(-60%);
-    opacity: 0;
-  }
-}
-
-@keyframes n-scroll-number-fade-down-out {
-  from {
-    transform: translateY(0%);
-    opacity: 1;
-  }
-  to {
-    transform: translateY(60%);
-    opacity: 0;
-  }
-}
-
-@include b(scroll-numbers) {
-  overflow: hidden;
-  white-space: nowrap;
-  display: inline-block;
-  height: 18px;
-  line-height: 18px;
-  @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;
-    @include b(scroll-number-old-number) {
-      display: inline-block;
-      opacity: 0;
-      position: absolute;
-      left: 0;
-      @include m(top) {
-        transform: translateY(-100%);
-      }
-      @include m(bottom) {
-        transform: translateY(100%);
-      }
-      @include m(down-scroll) {
-        animation: n-scroll-number-fade-down-out .2s $--n-ease-out-cubic-bezier;
-        animation-iteration-count: 1
-      }
-      @include m(up-scroll) {
-        animation: n-scroll-number-fade-up-out .2s $--n-ease-out-cubic-bezier;
-        animation-iteration-count: 1
-      }
-    }
-    @include b(scroll-number-current-number) {
-      display: inline-block;
-      position: absolute;
-      left: 0;
-      top: 0;
-      bottom: 0;
-      right: 0;
-      opacity: 1;
-      transform: translateY(0);
-      @include m(down-scroll) {
-        animation: n-scroll-number-fade-down-in .2s $--n-ease-out-cubic-bezier;
-        animation-iteration-count: 1
-      }
-      @include m(up-scroll) {
-        animation: n-scroll-number-fade-up-in .2s $--n-ease-out-cubic-bezier;
-        animation-iteration-count: 1
-      }
-      @include e(inner) {
-        display: inline-block;
-        position: absolute;
-        right: 0;
-        top: 0;
-        @include m(not-number) {
-          right: unset;
-          left: 0;
-        }
-      }
-    }
-  }
-}

src/_styles/index.scss

@@ -4,7 +4,6 @@
 @import '../../node_modules/vue-virtual-scroller/dist/vue-virtual-scroller';
 
 @import "./BaseLoading.scss";
-@import "./BaseSlotMachine.scss";
 @import './BaseSuffix.scss';
 @import './BaseSelection.scss';
 @import './BaseSelectMenu.scss';

src/styles/_transitions/fade-up-width-expand.js

@@ -0,0 +1,37 @@
+import { c, namespace } from '../../_utils/cssr'
+import commonVariables from '../_common-style/base'
+
+const {
+  easeOutCubicBezier
+} = commonVariables
+
+export default function fadeUpWidthExpandTransition ({
+  duration = '.2s'
+} = {}) {
+  return [
+    c(`&.${namespace}-fade-up-width-expand-transition-leave-active`, {
+      transition: `opacity ${duration} ${easeOutCubicBezier}, max-width ${duration} ${easeOutCubicBezier}, transform ${duration} ${easeOutCubicBezier}`
+    }),
+    c(`&.${namespace}-fade-up-width-expand-transition-enter-active`, {
+      transition: `opacity ${duration} ${easeOutCubicBezier}, max-width ${duration} ${easeOutCubicBezier}, transform ${duration} ${easeOutCubicBezier}`
+    }),
+    c(`&.${namespace}-fade-up-width-expand-transition-enter-to`, {
+      opacity: 1,
+      transform: `translateX(0) translateY(0)`
+    }),
+    c(`&.${namespace}-fade-up-width-expand-transition-enter`, {
+      maxWidth: '0 !important',
+      opacity: 0,
+      transform: 'translateY(60%)'
+    }),
+    c(`&.${namespace}-fade-up-width-expand-transition-leave`, {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }),
+    c(`&.${namespace}-fade-up-width-expand-transition-leave-to`, {
+      maxWidth: '0 !important',
+      opacity: '0 !important',
+      transform: 'translateY(60%)'
+    })
+  ]
+}