Jquery 在动画结束时，不使用.animate（）；

我正在构建一个iPad网络应用程序。.animate方法太慢，无法使用，这就是为什么我的大多数转换都是使用css完成的。如何实现

html

js

---

如何使用webkitAnimationEnd，或者更确切地说，如何在不使用.animate的情况下触发已完成的动画制作？

能否将元素的类从具有动画的类更改为不具有动画的类

我是不是误解了这个问题

你的意思是相反的吗？你想知道css动画什么时候结束吗？我假设你可以通过设置一个计时器并提前计算动画需要多长时间来完成

位置：修复了iOS safari无法工作的问题。它的行为就像是绝对的；所以不要再在iOS上使用此属性，因为我也在这样做

您可以只使用CSS3，使用方法来完成您想要做的事情

请不要在这里使用JavaScript（也称jQuery）在iOS中制作动画。它从来没有给我好的结果

这里是我的你的代码在纯CSS动画

CSS:

JQ

HTML

---

它不是反向的，它应该从一个位置随机跳到另一个位置。这是我以前的解决方案，但关键帧暗示我知道它最初的位置。在这个答案中，您必须为3个位置生成6个关键帧。添加位置后，关键帧的数量将以指数方式增加。我尝试过从对象中删除，但没有成功。正如我告诉过你的，你可以只使用一个关键帧，并使用步骤只为关键帧的一部分设置动画。请阅读文档动画计时功能。steps方法假定预设是串联的，这意味着您只能向前或向后拖动点。假设有6个步骤0%，20%，40%，60%，80%，100%，我想从40%跳到0%，再跳到100%，作为一个例子

<div id="myGallery" class="container"></div>

.container {
position: fixed;
-webkit-transition: -webkit-transform 0.25s ease-in-out;
}

.pos-1 {
-webkit-transform:translate3d(0px,0px,0px);
}

.pos-2 {
-webkit-transform:translate3d(100px,0px,0px);
}
.pos-3 {
-webkit-transform:translate3d(200px,0px,0px);
}

$("#myGallery").removeClass("pos-" + this.previousId).addClass("pos-" + this.currentId);

$("#myGallery").bind("webkitAnimationEnd", function() {
        // this.style.webkitAnimationName = "";
        console.log("done animating");
    });

@-webkit-keyframes pos1{
    from{-webkit-transform:translate3d(200px,0px,0px)}
    to{-webkit-transform:translate3d(0px,0px,0px)}   
}
@-webkit-keyframes pos2{
    from{-webkit-transform:translate3d(0px,0px,0px)}
    to{-webkit-transform:translate3d(100px,0px,0px)}   
}
@-webkit-keyframes pos3{
    from{-webkit-transform:translate3d(100px,0px,0px)}
    to{-webkit-transform:translate3d(200px,0px,0px)}   
}


.container {
width:100px; height:100px; border:1px solid gray;
    -webkit-transform:translate3d(200px,0px,0px)
}
.pos1{
  -webkit-animation-name: pos1;
 -webkit-animation-duration: 0.25s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-iteration-count: 1;

    -webkit-transform:translate3d(0px,0px,0px)
}

.pos2{
  -webkit-animation-name: pos2;
 -webkit-animation-duration: 0.25s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-iteration-count: 1;

    -webkit-transform:translate3d(100px,0px,0px)
}

.pos3{
  -webkit-animation-name: pos3;
 -webkit-animation-duration: 0.25s;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-iteration-count: 1;

    -webkit-transform:translate3d(200px,0px,0px)
}

$('#p1').click(function(){
$('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos1');
});
$('#p2').click(function(){
$('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos2');
});
$('#p3').click(function(){
$('#myGallery').removeClass('pos1, pos2, pos3').addClass('pos3');
});

<div id="myGallery" class="container"></div>
<input type="button" value="pos1"  id="p1"/>
<input type="button" value="pos2"  id="p2"/>
<input type="button" value="pos3"  id="p3"/>