如何将.animate更改为.css，这样它就不会与CSS3动画发生冲突

How to change .animate to .css so it doesn't conflict with a CSS3 animation?

本文关键字：CSS3 动画 冲突 animate css      更新时间：2023-09-26

下面是我用来浏览CSS3幻灯片的部分代码，该幻灯片使用立方bezier动画并使用关键帧计时。

现在这行代码…

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

…与我现有的css冲突，因为我知道它们不能一起使用。我的问题是，我如何编辑这行代码，使它是。css而不是。animate为了它的功能，而不是与我的css3动画冲突?

演示

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

任何帮助都将是感激的，非常感谢!

无论如何，这都不是一个跨浏览器的解决方案，但是您仍然可以使用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属性自动跨浏览器(即在必要时包括供应商前缀)

同样值得注意的是，你可以监听另一个事件来处理正在结束的动画。您可以绑定到animationend，而不是transitionend。

这个函数不在click函数中:

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

将函数拉到它的外部并使用:

function animateList(left_indent) {

然后在你的click函数中把它改成:

var item_width = $("#carousel .video-list li").outerWidth();
var left_value = item_width * (-1);
$('#previous').click(function () {
    //get the right position            
    var left_indent = parseInt($("#carousel .video-list").css('left')) + item_width;
    //slide the item   
    animateList(left_indent);
    //cancel the link behavior            
    return false;
});

更新animateList()函数

function animateList(left_indent) {
    $(".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();
}

这将删除javascript动画，这样你就可以使用基于left属性的CSS过渡。

#carousel .video-list {
    -webkit-transition: left ease 2s; /* For Safari 3.1 to 6.0 */
    transition: left ease 2s;
}
相关文章：