feat(Progress): add transition effect

youzan · Aug 25, 2021 · ba4ff58 · ba4ff58
1 parent 841e09d
commit ba4ff58
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 8 deletions.
diff --git a/src/progress/Progress.tsx b/src/progress/Progress.tsx
@@ -3,6 +3,8 @@ import { truthProp, createNamespace, addUnit } from '../utils';
 
 const [name, bem] = createNamespace('progress');
 
+const transition = 'all 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96)';
+
 const props = {
   color: String,
   inactive: Boolean,
@@ -31,13 +33,6 @@ export default defineComponent({
     );
 
     const scaleX = computed(() => +props.percentage! / 100);
-    const translateX = computed(() => {
-      let offset = 0;
-      if (+props.percentage! !== 0) {
-        offset = (100 - +props.percentage!) / 2 / (+props.percentage! / 100);
-      }
-      return `${offset}%`;
-    });
 
     const renderPivot = () => {
       const { textColor, pivotText, pivotColor, percentage } = props;
@@ -50,6 +45,7 @@ export default defineComponent({
           left: `${+percentage!}%`,
           transform: `translate(-${+percentage!}%,-50%)`,
           background: pivotColor || background.value,
+          transition,
         };
 
         return (
@@ -69,7 +65,9 @@ export default defineComponent({
       const portionStyle = {
         background: background.value,
         width: '100%',
-        transform: `scaleX(${scaleX.value}) translateX(-${translateX.value})`,
+        transform: `scaleX(${scaleX.value})`,
+        'transform-origin': 0,
+        transition,
       };
 
       return (

diff --git a/src/progress/demo/index.vue b/src/progress/demo/index.vue
@@ -1,20 +1,47 @@
 <script setup lang="ts">
 import { useTranslate } from '@demo/use-translate';
+import { reactive } from '@vue/reactivity';
 
 const i18n = {
   'zh-CN': {
     title2: '置灰',
     title3: '样式定制',
     strokeWidth: '线条粗细',
+    transition: '过渡效果',
+    increase: '增加',
+    decrease: '减少',
   },
   'en-US': {
     title2: 'Inactive',
     title3: 'Custom Style',
     strokeWidth: 'Stroke Width',
+    transition: 'Transition Effect',
+    increase: 'increase',
+    decrease: 'decrease',
   },
 };
 
 const t = useTranslate(i18n);
+
+const state = reactive({
+  percentage: 0,
+});
+
+const increment = 10;
+const increase = () => {
+  if (state.percentage >= 100 - increment) {
+    state.percentage = 100;
+  } else {
+    state.percentage += increment;
+  }
+};
+const decrease = () => {
+  if (state.percentage <= increment) {
+    state.percentage = 0;
+  } else {
+    state.percentage -= increment;
+  }
+};
 </script>
 
 <template>
@@ -40,6 +67,14 @@ const t = useTranslate(i18n);
       color="linear-gradient(to right, #be99ff, #7232dd)"
     />
   </demo-block>
+
+  <demo-block :title="t('transition')">
+    <van-progress inactive :percentage="state.percentage" />
+    <div style="display: flex; justify-content: space-around">
+      <van-button @click="decrease">{{ t('decrease') }}</van-button>
+      <van-button @click="increase">{{ t('increase') }}</van-button>
+    </div>
+  </demo-block>
 </template>
 
 <style lang="less">