动画加载栏不是从零开始

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 1000var 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 1000

var loading_time = loading_time * 1000;

$("#scanBanknote").on("shown.bs.modal", function (event) {

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

  Click Me

</button>

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

既然您说在不同的上下文中很难理解，那么当应用到您的场景时，情况可能如下所示：

<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 src="{%static 'js/progress_bar.js'%}"></script>

<script>

    $("#scanBanknote").on("shown.bs.modal", () => initProgressBar(8));

</script>

progress_bar.js

function initProgressBar(loading_time) {

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

    loading_time *= 1000;

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

}

Answer 2

点击下方的“运行代码片段”。如您所见，条形图始终从 0% 开始。

也许，动画在页面加载时开始，因为模态是隐藏的，直到打开才能看到它。

在这种情况下，您必须$(".progress-bar").animate仅在打开模式时运行代码

var loading_time = 8

loading_time = loading_time * 1000

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

.progress-bar {

  height: 10px;

  background: red;

}

.progress {

  width: 500px;

  background: black;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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