Как остановить переход CSS3

Я хочу остановить переход, который выполняется.

Я нашел несколько ссылок [1] [2], разбросанных по Интернету, но я не могу представить их вместе.

Здесь сценарий первого предложения (с jQuery и CSS Transit для контекста): http://jsfiddle.net/thomseddon/gLjuH/

Спасибо

[1] https://twitter.com/evilhackerdude/status/20466821462

[2] github.com/madrobby/zepto/issues/508

Ответ 1

Итак, я понял: http://jsfiddle.net/thomseddon/gLjuH/3/

Трюк заключается в том, чтобы установить каждое свойство css, которое вы анимируете, к его текущему значению (возможно, к середине перехода), например: $(this).css('prop', $(this).css('prop')); (Вероятно, захотите сохранить все свойства объекта в элементе с $(this).data( реквизит) и проведите через них).

После того, как вы явно установили свойства, вы можете запустить анимацию 0s, чтобы переопределить предыдущую анимацию и эффективно остановить элемент.

Ответ 2

Там гораздо более простое решение. Если вы хотите просто остановить переход (а не приостановить его). Просто установите css в текущий вычисленный стиль. Например, в пользовательском прокручивающем решении, где top - это свойство перехода.

element.style.top=getComputedStyle(element).top;

и что он.