Question

我正在构建一个iPad网络应用程序。 .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

position:fixed不起作用。它会像绝对一样;所以不要再在iOS上使用这个属性，因为我正在做同样的事情
您可以使用steps()方法完成CSS3尝试的操作。

请不要在这里使用JavaScript aka 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"/>

在动画结束时没有使用.animate（）;

2 个答案: