2011-03-17 15 views
26

Google me está fallando un poco en esto (creo que porque la terminología para PolyFill/Shim/Spackle es nueva y diversa en este momento). Estoy tratando de encontrar un buen JavaScript PolyFill o Shim para las transiciones de CSS de webkit (y ahora a partir de RC FireFox 4).PolyFill/Shim para transiciones CSS y animaciones

He encontrado this work que Weston Ruter hizo, pero no se ha actualizado por un tiempo, y utiliza la detección del navegador en comparación con la detección de características.

También descubrí FakeSmile pero está orientado principalmente a la animación SVG.

¿Alguien sabe de alguna buena biblioteca para completar esta funcionalidad? Preferiblemente algo que funcionaría con Modernizr y aún se está trabajando activamente. Hasta ahora, la mejor opción parece comenzar con lo que se le ocurrió a Weston.

+0

Buscando lo mismo ... Nada en [Lista de polyfills de Modernizr] (https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) (¿todavía?). – saadtazi

+0

Quizás podría aclarar la pregunta de alguna manera. ¿Qué has intentado hasta ahora? ¿Qué funcionalidad estás buscando? ¿De qué manera las soluciones existentes no satisfacen tus necesidades? – KatieK

+0

Creo que el OP está pidiendo algo para rellenar la funcionalidad de CSS, para que las animaciones puedan declararse en el CSS. El jumper de jQuery.transition es para usar animaciones CSS3 para acelerar la función jQuery.animate. Esa forma de hacer las cosas tiene las animaciones declaradas en el JavaScript, no en el CSS. –

Respuesta

20

Hay un muy buen polyfill de transición CSS3 para jQuery llamado jQuery.transition.

Puede usar el método animate() habitual en jQuery, y usará automáticamente transiciones CSS3 si están disponibles, y si no, volverá a vainchar jQuery.

+9

Esto es un poco atrasado de lo que el OP está buscando, pero +1 de todos modos, ya que en muchos casos desea esta funcionalidad en JavaScript en lugar de CSS. (Sin embargo, definitivamente hay casos en los que CSS es más apropiado, por ejemplo, la transición entre estados normales y ': flotación '.) – Domenic

+2

Lo sé, pero el mejor relleno es de esta manera. La otra forma es cargar y analizar la hoja de estilo, y extraer los parámetros de transición y convertirlos a JavaScript. Algo que tiene bastante hambre de recursos. –

+1

Gracias por señalarme este polyfill: he estado luchando con otros complementos con errores que no me dieron más que pena. Este funciona maravillosamente. –

5

Google Polymer Project incluye Web Animations polyfill para el borrador W3C Web Animations spec.

caveat.emptor: Este es un trabajo muy temprano, ya que la especificación del W3C es solamente un Borrador de Trabajo Público, así que cualquier cosa podría cambiar. Además, parece que los polyfills de Polymer apuntan solo a la última versión de los navegadores (por ejemplo, IE10 +), por lo que es posible que no se adapte a tus necesidades. Aún así, esto es temprano en el proyecto, así que vigílelo y experimente.

Si tiene cuidado de probar las plataformas en las que están sus usuarios, puede aprovechar la futura web de hoy.

+0

Enlace directo al proyecto GitHub: https://github.com/web-animations/web-animations-js –

Cuestiones relacionadas