Question

我正在尝试从使用jQuery动画切换到Velocity，因为它应该在各种设备上具有更好的性能。从文档中看起来应该相当容易 - 我已经下载了源代码并将其添加到我的js文件夹中，在我的函数中我应该能够将.animate（）切换到.velocity（）。仍然没有工作，我没有控制台日志错误。（还要记住它之前使用jQuery动画。我也尝试下载src代码并使用CDN而没有运气）

以下是代码：

// PROGRESSBAR
var show_complete_time = 2000; // time to show completed green progressbar and 100% text
function progressbar(progressbar, time) {

    var progressbar = $(progressbar);

    $({someValue: 0}).velocity({someValue: 99}, {
        duration: time,
        easing: 'linear',
        step: function() { 
            var widthNumber = this.someValue;
            var number = Math.floor(this.someValue+1);
            progressbar.css({"width": widthNumber + "%"});
            progressbar.html("<p>" + number + '%' + "</p>");
        },
        complete: function(){ // progressbar completed
            progressbar.css({"width": "100%"});
            progressbar.addClass("complete").html("<p>100%</p>");
        }
    });
};

Answer 1

事实证明，jQuery动画函数编写的方式不是正确的速度格式。 Velocity将CSS属性和值的映射作为其第一个参数。可以选择将选项对象作为第二个参数传入。

这是新的Velocity功能：

// PROGRESSBAR
var show_complete_time = 2000; // time to show completed green progressbar and 100% text
function progressbar(progressbar, time) {

    var progressbar = $(progressbar);

    progressbar.velocity({"width": "100%"}, {
        duration: time,
        easing: "linear",
        progress: function(elements, c, r, s, t) { 
            var number = Math.floor((c * 100) + 1);
            progressbar.html("<p>" + number + '%' + "</p>");
        },
        complete: function(){ // progressbar completed
            progressbar.addClass("complete").html("<p>100%</p>");
        }
    });

};

使用Velocity.js为进度条设置动画

1 个答案: