动画加载栏不是从零开始

Question

我正在开发一个在后端使用 Django 并在前端使用 Bootstrap 的项目。说到前端，我是个菜鸟，JS 对我来说是黑魔法。

我需要一个在 X 秒内从 0% 变为 100% 的动画加载栏。我设法拼凑一些有用的东西，有时。

问题是加载栏并不总是从 0% 开始。它似乎从感觉开始的地方开始，有时甚至从 100% 开始。加载栏位于用户单击按钮时弹出的模式内。

在 Boris K 提供线索之后，实际问题似乎是：如何在模式打开后立即运行 js。

html文件示例

<div class="modal fade" id="scanBanknote" data-backdrop="static" tabindex="-1" role="dialog"

     aria-labelledby="staticBackdropLabel" aria-hidden="true">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title" id="staticBackdropLabel">Scanning banknote</h5>

            </div>

            <div class="modal-body">

                Please wait...

                <div class="progress">

                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>

                </div>

            </div>

        </div>

    </div>

</div>

<script>

    var loading_time = 8

</script>

<script src="{%static 'js/progress_bar.js'%}"></script>

progress_bar.js

// loading time must be set in milliseconds, multiply by 1000

var loading_time = loading_time * 1000

$(".progress-bar").animate({width: "100%"}, loading_time);

Answer 1

您当前在页面加载时直接触发动画。这意味着动画在模态仍然隐藏时开始。而是在显示模态时触发动画。您可以在Bootstrap 文档中找到模式的不同事件。在这种情况下，我选择了：显示.bs.modal当模式对用户可见时触发此事件（将等待 CSS 转换完成）。如果由单击引起，则单击的元素可用作relatedTarget事件的属性。var loading_time = 8;// loading time must be set in milliseconds, multiply by 1000var loading_time = loading_time * 1000;$("#scanBanknote").on("shown.bs.modal", function (event) {&nbsp; $(".progress-bar").animate({width: "100%"}, loading_time);});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#scanBanknote">&nbsp; Click Me</button><div class="modal fade" id="scanBanknote" data-backdrop="static" tabindex="-1" role="dialog"&nbsp; &nbsp; &nbsp;aria-labelledby="staticBackdropLabel" aria-hidden="true">&nbsp; &nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5 class="modal-title" id="staticBackdropLabel">Scanning banknote</h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Please wait...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="progress">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div>既然您说在不同的上下文中很难理解，那么当应用到您的场景时，情况可能如下所示：<div class="modal fade" id="scanBanknote" data-backdrop="static" tabindex="-1" role="dialog"&nbsp; &nbsp; &nbsp;aria-labelledby="staticBackdropLabel" aria-hidden="true">&nbsp; &nbsp; <div class="modal-dialog" role="document">&nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h5 class="modal-title" id="staticBackdropLabel">Scanning banknote</h5>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Please wait...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="progress">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></div><script src="{%static 'js/progress_bar.js'%}"></script><script>&nbsp; &nbsp; $("#scanBanknote").on("shown.bs.modal", () => initProgressBar(8));</script>progress_bar.jsfunction initProgressBar(loading_time) {&nbsp; &nbsp; // loading time must be set in milliseconds, multiply by 1000&nbsp; &nbsp; loading_time *= 1000;&nbsp; &nbsp; $(".progress-bar").animate({width: "100%"}, loading_time);}

Answer 2

点击下方的“运行代码片段”。如您所见，条形图始终从 0% 开始。也许，动画在页面加载时开始，因为模态是隐藏的，直到打开才能看到它。在这种情况下，您必须$(".progress-bar").animate仅在打开模式时运行代码var loading_time = 8loading_time = loading_time * 1000$(".progress-bar").animate({width: "100%"}, loading_time);.progress-bar {&nbsp; height: 10px;&nbsp; background: red;}.progress {&nbsp; width: 500px;&nbsp; background: black;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="progress">&nbsp; <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%"></div></div>