时间戳

首页 > 解决方案 > 动画自建栏

html - 动画自建栏

问题描述

我正在显示一个条形图 (div)，它显示了您的健康饮食和运动水平。它的值从 0 到 100%。在页面重新加载 javascript 让 div 从 0% 增长到达到的水平，例如 70%。但它看起来真的停滞不前，它并没有以一致的方式流畅地增长。你有什么提示可以解决这个问题吗？obj.aktivitaetIndex3Tage携带值，balkenAktivitaet是按长度显示值的 div。一切都很好，只是看起来很差，因为它没有流畅地生长。

非常感谢。

<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);

标签： htmlcss

解决方案

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

CSS：

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

JS：

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

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

推荐阅读