问题描述
我有这个进度条 div,其宽度绑定到数据属性结果并相应更改。目前它仍在跳跃,但我想为它设置动画。我想跟踪旧值和新值并使用 css 变量或仅使用 setInterval 方法将其注入到 css 中,但是跟踪 2 个值似乎变得非常复杂,对我来说似乎有点矫枉过正。有人有更简单的想法吗?
<template>
<div class="progress">
<div class="progress-value" :style="{ 'width': result + '%' }">
<h2>{{ result }}%</h2>
</div>
</div>
</template>
<script>
export default {
props: ["result"],};
</script>
<style scoped>
.progress {
background: #ccc;
border-radius: 100px;
position: relative;
padding: 5px 5px;
margin: 5px 5px;
height: 40px;
width: auto;
}
.progress-value {
animation: load 3s normal forwards;
border-radius: 100px;
background: #fff;
height: 30px;
text-align: center;
}
/* @keyframes load {
0% {
width:
}
100% {
width:
}
} */
</style>
解决方法
像这样添加css过渡:
transition-property: all;
transition-timing-function: cubic-bezier(0.4,0.2,1);
transition-duration: 1s;
并修复绑定:
<div class="progress-value" :style="'width: ' + result + '%'">
<template>
<div class="progress">
<div class="progress-value" :style="'width: ' + result + '%'">
<h2>{{ result }}%</h2>
</div>
</div>
</template>
<script>
export default {
data () {
return {
result: 5
}
},mounted() {
this.increment()
},methods: {
increment() {
this.result += 10
if (this.result < 95) {
setTimeout(this.increment,1000)
}
}
}
}
</script>
<style scoped>
.progress {
background: #ccc;
border-radius: 100px;
position: relative;
padding: 5px 5px;
margin: 5px 5px;
height: 40px;
width: auto;
}
.progress-value {
transition-property: all;
transition-timing-function: cubic-bezier(0.4,1);
transition-duration: 1s;
background: #fff;
height: 30px;
text-align: center;
}
</style>