Переход до конца перехода CSS3

Question

У меня есть приложение, в котором я пытаюсь переключиться с jQuery .animate на CSS3 переходы, чтобы переместить список карт влево/вправо в ответ на жесты и нажатия кнопок.

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

Это отлично подходит для жестов, но если пользователь нажимает кнопку или поворачивает поворотный переключатель для перемещения по страницам, он должен перемещать одну страницу за клик. Если во время анимации нажать, я хочу, чтобы анимация пропустила до конца и начала новую анимацию.

Использование jQuery было легко очистить очередь анимации и пропустить до конца анимации. Это именно то, что я хочу, но с CSS3. Но пока я не смог понять, как это сделать.

Ниже я попытался остановить переход CSS3, но он, похоже, не работает (щелкните квадрат один раз, чтобы выполнить слайд, щелкните середину слайда, чтобы удалить свойства перехода CSS3). Однако второй клик не останавливает анимацию.

http://jsfiddle.net/RnKyz/1/

Любой путь, чтобы перейти к концу анимации?

Answer 1

Вы можете «остановить» анимацию, добавив класс перед запуском оригинальной анимации, а затем удалить его, когда вы хотите, чтобы остановить его:

Демо: http://jsfiddle.net/SO_AMK/LXqcz/2/

CSS:

#block { 
    position: absolute; 
    width: 100px; 
    height: 100px; 
    background: #ff0000; 
} 

.animate { 
    transition: left 2s; 
    -moz-transition: left 2s; 
    -webkit-transition: left 2s; 
    -o-transition: left 2s; 
    -ms-transition: left 2s; 
}​ 
​ 

jQuery:

$("#block").on("click", function() { 
    $(this).addClass("animate").css("left", "300px"); 

    $(this).off("click"); 
    $(this).on("click", function() { 
     $(this).removeClass("animate"); 
    }); 
});​ 

Примечание: Я упростил сотрудничество de для демонстрации, полный «фиксированный» код находится здесь: http://jsfiddle.net/SO_AMK/LXqcz/