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

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

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

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

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

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

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

Есть ли способ перейти к концу анимации?


html jquery css css-transitions
person Danny    schedule 13.09.2012    source источник

Ответы (1)


arrow_upward
4
arrow_downward

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

Демонстрация: 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");
    });
});​

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

person A.M.K    schedule 14.09.2012
comment
Этот метод больше не работает в современных браузерах. (Я понятия не имею, почему, метод имеет большой смысл). - person Peeyush Kushwaha; 10.04.2014