CSS3 – Animación de properties de margen izquierdo a través de JavaScript

Teniendo en count esta testing de concepto , ¿sería posible animar el margen izquierdo (valores negativos y positivos) a través de JavaScript? … ¿Y cómo harías para hacerlo?

Nota: Sé que es solo WebKit. Y estoy bien con eso, ya que estoy desarrollando para iOS Safari.

Actualizar

Gracias por las respuestas, pero la function animada de jQuery no admite animaciones CSS puras, que es lo que necesito.

Sé que dices específicamente "¿puedes hacer esto en JavaScript?", Pero no deberías usar JavaScript. Estoy bastante seguro de que la testing de concepto que vinculas solo usa jQuery como una forma de hacer que las animaciones recorran JavaScript, para que todos los browseres jueguen bien con la animation. Dado que está desarrollando específicamente para Mobile Safari, no debería necesitar utilizar jQuery para esto, excepto para usar un complemento de historial para insert estados emergentes y hacer que el button de retroceso del browser funcione; esto es completamente factible a través de las properties de transición CSS y el :target pseudo selector de :target .

Entonces, como alternativa, debería poder hacer algo como esto:

En HTML:

 <div id="thing-that-will-transition"> <a href="#thing-that-will-transition>click this to transition the div</a> </div> 

En CSS:

 #thing-that-will-transition { (bunch of properties) -webkit-transition: margin-left [the rest of your transition values] } #thing-that-will-transition:target { margin-left: [your properties] } 

Siempre y cuando su fragment de URL coincida con el nombre del elemento que desea hacer la transición, entonces debería poder insert el fragment en la URL usando JavaScript si tiene que hacerlo en lugar de utilizar el anclaje con un fragment href mientras sigue teniendo la transición se lleva a cabo. Y si usas un complemento de historial de jQuery o si haces tu propio empujar y hacer estallar la stack de historial, seguirás teniendo un comportamiento de button de retroceso para tu aplicación.

Sé que solicitó específicamente una solución de JavaScript para activar la animation CSS, pero no estoy seguro de por qué esto es lo que necesita. Lo siento si esto no te ayuda en absoluto.

ACTUALIZACIÓN : aquí hay un jsFiddle que demuestra lo anterior . Utiliza este plugin de historial de jQuery para administrar la stack de historial, de modo que aún puede get un comportamiento aceptable del button de retroceso / avance desde las URL del fragment. La label de anclaje utiliza el método "push" o "load" del complemento en onClick con un fragment estándar en el atributo href como recurso alternativo para browseres sin JS habilitado.

ACTUALIZACIÓN 2: Aquí hay otro jsFiddle que usa transformaciones / traducciones en lugar de transiciones.

ACTUALIZACIÓN 3 (por roosteronacid):

Y en cuanto a hacer que las animaciones pasen por JavaScript, puedes hacer lo siguiente:

 var element = document.getElementById("..."); setTimeout(function () { element.style.webkitTransitionDuration = "0.3s"; element.style.webkitTransitionTimingFunction = "ease-out"; element.style.webkitTransform = "translate3d(300px, 0, 0)"; }, 0); 

Puede establecer una transición en css3, y luego se animarán los cambios subsiguientes al elemento.

 .MY_CLASS { -moz-transition: all 0.3s ease-out; /* FF4+ */ -o-transition: all 0.3s ease-out; /* Opera 10.5+ */ -webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */ -ms-transition: all 0.3s ease-out; /* IE10 */ transition: all 0.3s ease-out; } 

Esto especifica una transición casi cruzada (maldita IE) que se aplica a todos los cambios de CSS, dura 0.3 segundos y se relaja, por lo que se ralentizará hacia el final de la transición. Por lo tanto, para animarlo a la izquierda / derecha, simplemente cambie el css:

 $(".MY_CLASS").css("margin-left", "-300px"); 

Tenga en count que esto lo animará a una position fija de 300 px, si desea animar a una position relativa a su location actual, use:

 var mleft = $(".MY_CLASS").css("margin-left"); var newleft = mleft.substr(0, mleft.length-2) + 50; $('.MY_CLASS').css("margin-left", newleft+"px"); 

Vea un ejemplo de trabajo aquí (jsFiddle)

Mejores transiciones de uso, que son compatibles casi con el browser (excepto IE), y establecer los fotogtwigs key a través de JS.

Esto funciona solo con CSS, HTML y WebKit:

 #wrapper { width: 700px; text-align: left; border-radius:10px; -moz-border-radius:10px; border-style:solid; border-width:1px; border-color:#ccc; padding:30px 30px; -moz-box-shadow: 0px 0px 5px #BBB; -webkit-box-shadow: 0px 0px 5px #BBB; box-shadow: 0px 0px 5px #BBB; -webkit-transition-property: -webkit-transform, margin-left; -webkit-transition-duration: 3s; -webkit-transition-timing-function: ease-in; -webkit-transform: translate(100px); } 

Simplemente haga un <div id="wrapper">Placeholder text</div> en un file HTML para probarlo. Trabajó para mí en Google Chrome 12.0.742.112 y Safari 5.0.5 (6533.21.1). Si no hace la animation de inmediato, puede ser debido a que su browser procesa la traducción demasiado rápido (o en caching, ¿quizás?). Puede considerar agregar una demora de alguna manera. Acabo de presionar el button de actualización algunas veces realmente rápido. Trabajó para mí

Editar: Echa un vistazo a la fuente detrás de la página de testing de girliemac . Algunas cosas perspicaz allí. También vea esta publicación SO .

puede usar jqueries .animate()http://api.jquery.com/animate/

Mira mi ejemplo: http://jsfiddle.net/ajthomascouk/jS83H/ – Presiona + y –

Animar los márgenes css con jQuery funciona así:

 $( '#mydiv' ).animate({ 'margin-left': 'new margin value' }); 

Para usar las animaciones css de webkit, crearías una class que tiene la propiedad transform, entonces puedes usar jQuery para agregar / eliminar dicha class según sea necesario.