Прерывание / остановка перехода CSS3 на текущую позицию / состояние

Question

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

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

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

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

Answer 1

Не вдаваясь слишком глубоко в свой плагин, вы можете просто повторно использовать свой метод css3animate, используя текущие ( вычисленные ) значения для реквизитов, которые вы хотите, и установив продолжительность на 0 (* 1004) * 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");
    });
   }

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