Прерывание/остановка перехода CSS3 на фактическое положение/состояние

Я пишу плагин jQuery для анимации элементов через CSS3 Transitions. в jQuery есть как .stop(), который перехватывает текущую анимацию выбранного элемента.

Любая идея, как я могу остановить запущенную анимацию CSS3? Есть ли собственный способ справиться с этим или я должен замерить анимацию и установить стиль анимированного элемента в текущую позицию, размер цвета или whaterver?

Это текущее состояние плагина jQuery: http://jsfiddle.net/meo/r4Ppw/

Я попытался установить значение "-webkit-transition-duration" равным 0/none/false. но это не останавливает анимацию.

Ответ 1

Не заходя слишком глубоко в свой плагин, вы можете просто повторно использовать свой метод css3animate, используя текущие (рассчитанные) значения для реквизита, которые вы хотите, и установить длительность 0 (1 в вашем плагине, так как вы используете !speed, чтобы использовать значение по умолчанию..)

поэтому в примере с помощью

var $animated = $('div');
$animated.css3animate({"height": $animated.css('height'), "width": $animated.css('width')}, 1);

сделает трюк.

пример http://jsfiddle.net/T5LVX/1/

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

Обновление

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

Итак, в вашем методе animation вы могли бы $obj.data('animationCss', cssObject); и в методе stop

stop : function( clearQueue,jumpToEnd ){
    return this.each(function(){
        var $that = $(this);
        var currentCss = {};
        var animationCss = $that.data('animationCss');
        for (var prop in animationCss)
            currentCss[prop] = $that.css(prop);

        if (jumpToEnd)
        {
            animation($that,currentCss,1, function(){animation($that,animationCss,1)});
        }
        else
        {
            animation($that,currentCss,1);
        }
       console.log("stop was called");
    });
   }

example: http://jsfiddle.net/T5LVX/6/