jquery 키 프레임이 실행되지 않음

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); 
     } 
    });   
}; 

내가 가진 문제는 전체 콜백 기능입니다. 그것은 단지 발사가 아닙니다.

나는 그것은되었습니다 1

jsfiddle for you to look at :

업데이트를 만들었습니다 ... 나는 전에이 사용하고 일했다,하지만 난 내가 뭘 잘못 볼 수 없습니다 파이어 폭스에서 애니메이션이 작동하지 않는다고 지적했다. 내 피들을 보려면 크롬을 사용하십시오.

Answer 1

나는 이것을 알아 냈다. 플러그인과 관련이있다. 그래서 다시 쓰고 필요없는 것들을 제거했습니다.

(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); 

Answer 2

문서가 올바르지 않습니다 유사한 문제를 발견하는 사람들을 위해

, 여기에 코드입니다. playKeyframe의 두 번째 인수로 콜백을 전달하여 작동하도록했습니다.

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