Question

我正在使用this plugin，而且大多数情况下都有效。我创建了这段代码：

function spin() {
    var spinner = $(".spinner"),
        container = $(".spinner-container", spinner),
        items = $(".spinner-item", spinner);

    var itemWidth = items.first().outerWidth(true),
        containerWidth = items.length * itemWidth;

    container.css({
        width: containerWidth
    });

    $.keyframe.define({
        name: "slide",
        from: {
            "transform": "translate(0px)"
        },
        to: {
            "transform": "translate(-" + itemWidth + "px)"
        }
    });

    container.playKeyframe({
        name: "slide",
        duration: "5s",
        timingFunction: 'ease-in-out',
        repeat: 2,
        complete: function () {
            alert("complete");

            //var item = container.find(".spinner-item").first();

            //console.log(item);

            //item.parent().append(item);
        }
    });        
};

我遇到的问题是完整回调函数。它只是没有开火。我之前使用过它并且它有效，但我无法看到我做错了什么......

我创建了一个jsfiddle for you to look at：）

更新1

有人指出动画在firefox中不起作用。请使用chrome来查看我的小提琴。

Answer 1

文档不正确。我通过将回调传递给playKeyframe的第二个参数来实现它。

container.playKeyframe({
    name: "slide",
    duration: "5s",
    timingFunction: 'ease-in-out',
    repeat: 2
}, function () {
    alert("complete");
});

Answer 2

我想出来了，这与插件有关。所以我重写了它并删除了一些我不需要的东西。

对于那些发现类似问题的人，以下是代码：

(function () {
    // Data
    var domPrefixes = ["-webkit-", "-moz-", "-o-", ""];

    // Private methods
    var createKeyframeStyleTag = function (params) {
    return $("<style>").attr({
        class: "keyframe-style",
        id: params.id,
        type: "text/css"
    }).appendTo("head");
    };

    var defineKeyFrames = function (name, data, prefix) {
    var css = "@" + prefix + "keyframes " + name + " {";

    for (var key in data) {
        if (key !== "name") {
        css += key + " {";

        for (var property in data[key]) {
            css += prefix + property + ":" + data[key][property] + ";";
        }

        css += "}";
        }
    }

    css += "}";

    return css;
    };

    $.keyframe = {
    define: function (data) {
        var css = "",
        frameName = data.name || "";

        for (var i = 0; i < domPrefixes.length; i++) {
        css += defineKeyFrames(frameName, data, domPrefixes[i]);
        }

        createKeyframeStyleTag({
        id: frameName
        }).append(css);
    }
    };

    $.fn.playKeyframe = function (frameOptions) {
    var self = this,
        animationcss,
        delay,
        duration,
        repeat,
        callback;

    frameOptions = $.extend({
        duration: 0,
        timingFunction: "ease",
        delay: 0,
        repeat: 1,
        direction: "normal",
        fillMode: "forwards"
    }, frameOptions);

    delay = frameOptions.delay;
    duration = frameOptions.duration;
    repeat = frameOptions.repeat;

    callback = frameOptions.complete;
    animationcss = frameOptions.name + " " + duration + "ms " + frameOptions.timingFunction + " " + delay + "ms " + repeat + " " + frameOptions.direction + " " + frameOptions.fillMode;

    self.each(function () {
        var element = $(this);

        for (var i = 0; i < domPrefixes.length; i++) {
        $(element).css(domPrefixes[i] + "animation", animationcss);
        }

        if (callback) {
        element.on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd animationend", callback);
        element.on("webkitAnimationIteration mozAnimationIteration MSAnimationIteration oAnimationIteration animationiteration", callback);
        }
    });

    return self;
    };
}).call(this);

jquery关键帧完成不触发

2 个答案: