blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

chore(Progress): change style

Browse Source
This commit is contained in:
ascodelife 2021-08-25 12:53:43 +08:00 committed by neverland
parent ba4ff58af6
commit b4608cebdf
2 changed files with 4 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/progress/Progress.tsx
View File

@ -3,8 +3,6 @@ import { truthProp, createNamespace, addUnit } from '../utils';
const [name, bem] = createNamespace('progress'); const [name, bem] = createNamespace('progress');
const transition = 'all 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96)';
const props = { const props = {
color: String, color: String,
inactive: Boolean, inactive: Boolean,
@ -45,7 +43,6 @@ export default defineComponent({
left: `${+percentage!}%`, left: `${+percentage!}%`,
transform: `translate(-${+percentage!}%,-50%)`, transform: `translate(-${+percentage!}%,-50%)`,
background: pivotColor || background.value, background: pivotColor || background.value,
transition,
}; };
return ( return (
@ -64,10 +61,7 @@ export default defineComponent({
}; };
const portionStyle = { const portionStyle = {
background: background.value, background: background.value,
width: '100%',
transform: `scaleX(${scaleX.value})`, transform: `scaleX(${scaleX.value})`,
'transform-origin': 0,
transition,
}; };
return ( return (

5
src/progress/index.less
View File

@ -20,9 +20,12 @@
&__portion { &__portion {
position: absolute; position: absolute;
left: 0; left: 0;
width: 100%;
height: 100%; height: 100%;
background: var(--van-progress-color); background: var(--van-progress-color);
border-radius: inherit; border-radius: inherit;
transform-origin: 0;
transition: all 0.3s ease-out;
} }
&__pivot { &__pivot {
@ -38,6 +41,6 @@
word-break: keep-all; word-break: keep-all;
background-color: var(--van-progress-pivot-background-color); background-color: var(--van-progress-pivot-background-color);
border-radius: 1em; border-radius: 1em;
transform: translate(0, -50%); transition: all 0.3s ease-out;
} }
} }