在动画结束时使用.animate()；

Question

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

html

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

css

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

js

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

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

如何使用"webkitAnimationEnd“，或者更确切地说，如何在不使用.animate()的情况下触发”完成动画“？

Answer 1

难道你不能把元素的类从有动画的类改成没有动画的类吗？

我误解这个问题了吗？

你的意思是相反的吗？你想知道css动画什么时候结束吗？我假设您可以通过设置计时器并预先计算动画应该花费多长时间来做到这一点。

Answer 2

iOS safari中的

1. position:fixed不起作用。它的行为类似于绝对方法；因此不要再在iOS上使用此属性，因为我正在使用
2. 执行相同的操作。您可以使用steps()方法对CSS3执行您尝试执行的操作。

请不要使用JavaScript，也就是这里的jQuery在iOS中做动画。它从来没有给我带来好的结果。

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

CSS：

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

JQ

$('#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');
});

HTML

<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"/>