Interrumpir/detener una transición CSS3 en la posición/estado real

Question

Estoy escribiendo un complemento jQuery para animar elementos a través de transiciones CSS3. en jQuery existe el .stop() que interrumpe la animación actual en el elemento seleccionado.

¿Alguna idea de cómo podría detener una animación en curso de CSS3? ¿Hay una manera nativa de manejar esto o tengo que medir la animación, y establecer el estilo del elemento animado a la posición actual, el tamaño del color o whaterver?

Este es el estado actual del plugin de jQuery: http://jsfiddle.net/meo/r4Ppw/

He tratado de poner "webkit-transición de duración" a 0/ninguno/falso. pero no detiene la animación.

Answer 1

Sin entrar demasiado profundo en su plugin, sólo puede volver a utilizar el método de css3animate usando la corriente (calcula) valores para los apoyos que desea, y el establecimiento de la duración a 0 (1 en que el plugin ya que utilizar el !speed utilizar el valor por defecto ..)

por lo que en el ejemplo usando

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

hará el truco.

ejemplo en http://jsfiddle.net/T5LVX/1/

Por supuesto, usted debe automatizar esto para las propiedades actuales en uso. Si se utiliza un temporizador cuando se inicia la animación y uno cuando alguien utiliza el método de paro, también se puede simular una funcionalidad de pausa/reanudar ..

---

actualización

puede almacenar el pasado cssObject a la animación, al data del elemento, y al detener el ciclo a través de ellos para obtener los valores actuales.

Así que en animation método que pudiera $obj.data('animationCss', cssObject); y en el método 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"); 
    }); 
    } 

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