动画加载栏不是从零开始

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

您当前在页面加载时直接触发 animation。 这意味着 animation 在模态仍然隐藏时启动。 而是在显示模态时触发 animation。

您可以在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% 开始。

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

在这种情况下，您必须仅在打开模式时运行$(".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>