feat(range): 鸿蒙适配,修订NaN,纵向mark时异常问题 (#3217)

Author: xiaoyatong

src/packages/range/__test__/__snapshots__/range.spec.tsx.snap

@@ -15,7 +15,7 @@ exports[`range props test 1`] = `
       class="nut-range"
     >
       <div
-        class="nut-range-bar"
+        class="nut-range-bar nut-range-bar-animate"
         style="width: 40%; left: 0%; transition: none;"
       >
         <div
@@ -45,4 +45,4 @@ exports[`range props test 1`] = `
 </div>
 `;
 
-exports[`range test 1`] = `"<div><div class="nut-range-container"><div class="nut-range-min">0</div><div class="nut-range"><div class="nut-range-bar" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left" style="transform: translate(-50%, -50%);"><div class="nut-range-button" style="transform: translate(-50%, -50%);"><div class="nut-range-button-number" style="transform: translate(-50%, -100%);">30</div></div></div><div class="nut-range-button-wrapper-right" style="transform: translate(-50%, -50%);"><div class="nut-range-button" style="transform: translate(-50%, -50%);"><div class="nut-range-button-number" style="transform: translate(-50%, -100%);">60</div></div></div></div></div><div class="nut-range-max">100</div></div></div>"`;
+exports[`range test 1`] = `"<div><div class="nut-range-container"><div class="nut-range-min">0</div><div class="nut-range"><div class="nut-range-bar nut-range-bar-animate" style="width: 30%; left: 30%; transition: none;"><div class="nut-range-button-wrapper-left" style="transform: translate(-50%, -50%);"><div class="nut-range-button" style="transform: translate(-50%, -50%);"><div class="nut-range-button-number" style="transform: translate(-50%, -100%);">30</div></div></div><div class="nut-range-button-wrapper-right" style="transform: translate(-50%, -50%);"><div class="nut-range-button" style="transform: translate(-50%, -50%);"><div class="nut-range-button-number" style="transform: translate(-50%, -100%);">60</div></div></div></div></div><div class="nut-range-max">100</div></div></div>"`;

src/packages/range/demos/taro/demo11.tsx

@@ -42,7 +42,6 @@ const Demo11 = () => {
                 justifyContent: 'center',
                 top: '50%',
                 left: '50%',
-                // @ts-ignore
                 transform: 'translate(-50%, -50%)',
                 ...buttonNativeStyle,
               }}
@@ -54,7 +53,7 @@ const Demo11 = () => {
                         height: pxTransform(18),
                         color: 'white',
                         fontSize: pxTransform(10),
-                        lineHeight: pxTransform(10),
+                        lineHeight: 1,
                         textAlign: 'center',
                         paddingTop: pxTransform(4),
                         paddingBottom: pxTransform(4),

src/packages/range/range.scss

@@ -46,7 +46,10 @@
     max-height: 100%;
     background: $range-active-color;
     border-radius: 2px;
-    transition: all 0.2s;
+
+    &-animate {
+      transition: all 0.2s;
+    }
   }
 
   &-button {
@@ -204,7 +207,8 @@
     position: absolute;
     width: 36px;
     height: 100%;
-    top: initial;
+    // top: initial;
+    top: 0px;
     right: 50%;
     overflow: visible;
     font-size: 12px;