动画化自建吧

Question

我正在显示一个栏(div)，它显示了您的健康饮食和运动水平。它的值在0- 100%之间。在页面上重新加载一个javascript，让div从0%增长到达到的水平，例如70%。但它看起来真的很停顿，它不能以一致的方式流畅地增长。你有什么建议来解决这个问题吗? div携带这个值，而balkenAktivitaet是obj.aktivitaetIndex3Tage，它通过它的长度来显示值。它运行得很好，只是看起来很差，因为它不能流畅地生长。

非常感谢。

<div style="padding: 0px 0px 15px 10px;color:white;font-size:16px;font-weight:400">
    AKTIVITÄT
</div>
<div style="margin: 0px auto 15px auto;display:flex;flex-wrap:nowrap;">
    <div style="margin:0px;width:80%;height:26px;background-color: #326a68;display:flex;flex-wrap:nowrap;border:1px solid #001c1a;box-shadow:1px 1px 1px #002321;border-radius:5px;">
        <div id="balkenAktivitaet" style="margin:0px;background-color: #F9BC60;height:26px;width:0%;border-radius:5px 5px 5px 5px;box-shadow:1px 0px #001c1a;"></div>
    </div>
    <div id="aktivitaetsIndex3Tage" class="indexProzentzahl" style="margin:0% 0% 0% 2%;color:#F9BC60;font-size:26px;font-weight:400;"></div>
</div>

var i = 0;
var inv = setInterval(function aktivitaet() {
    if (i < obj.aktivitaetIndex3Tage && i <= 100) {
        document.getElementById("balkenAktivitaet").style.width = parseInt(i = i + 2) + "%";
    }
}, 50);

Answer 1

您可以立即将div的宽度设置为所需的百分比，同时向其css添加过渡-例如：

CSS：

#balkenAktivitaet {
   transition: width 2s ease;
   width: 0%;
}

JS：

document.getElementById("balkenAktivitaet").style.width = obj.aktivitaetIndex3Tage + '%';

示例代码：https://codepen.io/furiosys/pen/PobvpKa