слушатель событий, одно преобразование css заканчивается, а другое запускается - PullRequest
Новая
       31

слушатель событий, одно преобразование css заканчивается, а другое запускается

1 голос
/ 14 марта 2012

У меня есть преобразование css, которое происходит при нажатии кнопки, показанной здесь http://jsfiddle.net/xCkX7/5/

Я не уверен, если это возможно, но возможно ли будет сделать прослушиватель событий или, возможно, есть другойметод, поэтому, когда эта кнопка нажата и преобразование завершено, другой класс заменяет тот класс преобразования, который только что закончился, и выполняет вторую анимацию.Я хочу избежать использования ключевой анимации, потому что у меня есть проблема с этим конкретным методом, когда я хочу использовать конечное состояние анимации для преобразования, но оно сбрасывается.Вы можете увидеть эту проблему здесь http://jsfiddle.net/xCkX7/23/

По сути, я бы хотел, чтобы анимация запустила свой курс (это два шага), завершила, а затем смогла нажать другую кнопку, чтобы произошли другие преобразования,Как здесь http://jsfiddle.net/xCkX7/21/ за исключением того, что начальное преобразование - только один шаг.

1 Ответ

3 голосов
/ 14 марта 2012

Событие transitionend запускается всякий раз, когда CSS-переход завершается. Вы можете прослушать это событие с вашего первого перехода, а затем запустить второй переход, когда это событие сработает.

Имейте в виду, что в некоторых браузерах в именах событий transitionend есть префиксы, специфичные для поставщиков.

В этом случае вы могли бы выполнить следующую последовательность действий:

  1. Кнопка нажата
  2. Добавление прослушивателя событий для события transitionend на целевом объекте
  3. Внести изменения, которые запускают первый переход
  4. Когда срабатывает событие transitionend, удалите прослушиватель событий, чтобы не перепутать другие переходы, заканчивающиеся
  5. Внести изменения, которые запускают второй переход

Рабочую версию многоступенчатых переходов вы можете увидеть здесь: http://jsfiddle.net/jfriend00/5FnwY/

...