vue.js - Vue中绑定到数据属性的div的动画宽度
问题描述
我有这个进度条 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, 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, 0, 0.2, 1);
transition-duration: 1s;
background: #fff;
height: 30px;
text-align: center;
}
</style>
推荐阅读
- php - 通过纯枚举实现 JsonSerializable
- python - 在熊猫数据框中插入值 1 直到满足一个条件 [Python]
- python - 如何收集括号中每个位置的元素并将它们写入python中的csv文件
- arrays - 解析在 Snowflake 中的某个值中具有数组的 JSON
- python - 循环内的Python垃圾收集不起作用
- android - VueJS 页面:仅从移动浏览器引发“网络错误”,在笔记本电脑上工作正常
- java - SpringBootTest 没有加载@Component
- laravel - Laravel Passport - 为同一用户管理多个设备
- sql - Oracle:按日期字段合并多行
- csv - createReadStream - 解析多个 csv 文件,未触发结束事件 - 无法转到下一个文件