javascript - 如何将 .animate 更改为 .css 使其不与 CSS3 动画冲突？

Question

下面是我用来浏览 CSS3 幻灯片的代码的一部分，该幻灯片使用立方贝塞尔曲线进行动画处理并使用关键帧计时。

目前这行代码...

$("#carousel .video-list").animate({'left' : left_indent}, 1000, function () {

... 与我现有的 css 冲突，因为我了解到它们不能一起使用。我的问题是如何编辑该行代码，使其成为 .css 而不是 .animate 以使其正常运行而不与我的 css3 动画冲突？

DEMO

JS

var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);

//if user clicked on prev button
$('#previous').click(function () {
    //get the right position            
    var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;
    //slide the item            
$("#carousel .video-list").animate({'left' : left_indent}, 1000, function () {

    $(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", 
"-webkit-animation-play-state": "paused"});

    //move the last item and put it as first item                
    $("#carousel .video-list li:first").before($("#carousel .video-list li:last"));
    //set the default item to correct position
    $("#carousel .video-list").css({'left' : left_value});

    $("#myVideo").get(0).play();
    $("#myVideoTwo").get(0).play();
    $("#myVideoThree").get(0).play();
    $("#myVideoFour").get(0).play();

});
//cancel the link behavior            
return false;

});

任何帮助将不胜感激，非常感谢!

Answer 1

这无论如何都不是跨浏览器的解决方案，但您仍然可以使用 CSS 并监听 transitionend 事件来做到这一点。 Javascript 看起来像这样:

$("#carousel .video-list").bind( 'transitionend', function() {

    $(".video-list, #timeline, .description-list").css({"animation-play-state": "paused", "-webkit-animation-play-state": "paused"});

    // More code that's currently in the animation complete handler

});
$("#carousel .video-list").css({ left       : left_indent
                                 transition : 'all 1000ms linear'});

如果这能解决您的问题，我不做任何保证，但听起来您正在寻找一种方法让 .animate() 完成事件处理程序触发当前事件中的代码，尽管您'正在使用 CSS 转换。

顺便说一句，jQuery 将使您传递给 .css() 方法的 transition 属性自动跨浏览器(即在必要时包括 vendor 前缀)

此外，值得注意的是，您可以监听另一个事件来处理即将结束的动画。您将绑定(bind)到 animationend，而不是 transitionend。