如何获得在 window 调整大小时调整大小的动画进度元素？

Question

我正在尝试让包装器（仪表）内的动画进度跨度 div 在已经设置动画后调整 window 大小时像其他元素一样调整大小。请参阅此 fiddle - 如果您将 window 的大小调整得更小，则 .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() 循环后将宽度重置为 %（不幸的是，这不是直截了当的）。你可以自己计算。您将需要添加一个承诺以确保它在动画之后发生：

$(".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/

如何获得在 window 调整大小时调整大小的动画进度元素？

How do I get a progress element that was animated to resize on window resize?

html

javascript

css

jquery

window-resize