javascript - 如何获得在窗口调整大小时动画调整大小的进度元素？

Question

我正在尝试让包装器(仪表)div 内的动画进度跨度在已经设置动画后调整窗口大小时像其他元素一样调整大小。见此fiddle - 如果您将窗口的大小调整得更小，.meter > span 会保持不变，但所有其他元素都会正确调整大小。当我添加 window.resize 函数时，它只会让动画变得古怪。

HTML:

<div class="skill">
    <div class="meter"> <span style="width: 98%"></span>

    </div>
    <div class="skillname">Painting</div>
</div>
<div class="skill">
    <div class="meter"> <span style="width: 96%"></span>

    </div>
    <div class="skillname">Drawing</div>
</div>
<div class="skill">
    <div class="meter"> <span style="width: 93%"></span>

    </div>
    <div class="skillname">Photography</div>
</div>
<div class="skill">
    <div class="meter"> <span style="width: 90%"></span>

    </div>
    <div class="skillname">Sculpture</div>
</div>

CSS:

.meter {
    height: 16px;
    width: 70%;
    display: inline-block;
    position: relative;
    background: #DCD9D6;
    -webkit-border-radius: 25px;
    border-radius: 25px;
    padding: 1px;
    vertical-align:middle;
    box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.5);
}
.meter > span {
    display: block;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    background-color: #2F474E;
    box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
}
.skillname {
    display: inline-block;
    margin-left: 4px;
    font-size: 11px;
    vertical-align:middle;
    font-family:"Lato", sans-serif;
}

jQuery:

$(".meter > span").each(function (i) {
    $(this)
        .data("origWidth", $(this).width())
        .width(0)
        .animate({
        width: $(this).delay(200 * i).data("origWidth")
    }, 800);
});

Answer 1

您遇到的问题是 JS 会将其转换为计算宽度，而不是 CSS 中设置的百分比。您可以使用 window-resize 编写一些东西，但它可能会使它过于复杂。

相反，您可以在 .each() 循环后将宽度重置为 %(不幸的是，这不是直截了当的)。你可以自己计算。您需要添加一个 promise 以确保它在动画之后发生:

$(".meter > span").each(function(i) {
    $(this)
    .data("origWidth", $(this).width())
    .width(0)
    .animate({
      width: $(this).delay(200*i).data("origWidth") 
    }, 800); 
}).promise().done(function(){
    $(".meter > span").each(function() {
        $(this).width(Math.round(( 100 * parseFloat($(this).css('width')) /  parseFloat($(this).parent().css('width')) )) + '%');
    });
});

因此，我们只需将当前宽度除以父级的宽度乘以 100，然后在末尾打一个 % 符号。然后使用 jQuery 中的 css 属性将其添加到每个栏。似乎对我有用。

您可以在此处查看 JSFiddle: https://jsfiddle.net/jeaku9k9/1/