в конце анимации без использования .animate ();

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

1. position:fixed в iOS Safari не работает.Это будет действовать как абсолют;Так что больше не используйте это свойство на iOS, так как я делаю то же самое

2. Вы можете делать то, что вы пытаетесь сделать, просто используя CSS3, используя steps () method.

Пожалуйста, не используйте здесь JavaScript или jQuery для анимации в iOS.Это никогда не давало мне хороших результатов.

Вот мой скрипка ваш код на чистом 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"/>

Answer 2

Разве вы не можете просто поменять класс элемента с того, у которого есть анимация, на тот, у которого нет?

Я неправильно понял вопрос?

Вы имеете в виду обратное? Вы хотите знать, когда закончится анимация CSS? Я предполагаю, что вы можете сделать это, установив таймер и рассчитав заранее, сколько времени займет анимация.