¿Existe un marco de JavaScript que use CSS3 Transitions para efectos como cambiar la opacidad o mover elementos pero recurrirá a javascript setInterval/setTimeout si no es compatible?CSS3 Transiciones con Javascript Fallback
Salida del módulo de Transición YUI 3, que hace precisamente eso.
Se podría contemplar la utilización de http://www.modernizr.com/
que se ve bien para detectar facilitación de las transiciones. También noté que mootools tiene: http://mootools.net/docs/core/Fx/Fx.Tween y http://mootools.net/forge/p/fx_tween_css3 – benmmurphy
Modernizr es la forma más efectiva de comprobación de funciones en este momento y en 3kb, es realmente liviano (comparado con Mootools) – Jeepstone
LOL por supuesto Modernizr es más pequeño que MooTools es un kit de detección, no un Framework para dom manipulación, abstracción de clases y scripts de servidor – rgb
Echa un vistazo Addy Osmani's article. Es un buen resumen de las soluciones actuales con jQuery, específicamente:
Para resumir, hay algunos plugins para grandes marcos (ver otras respuestas):
Otros marcos ya utilizan transiciones CSS siempre que sea posible:
¿Hay micro-bibliotecas?
lamentablemente, ninguna de estas alternativas parece permitirle utilizar los easings, como rebotar.
Mi intento de usar animado mejorado movió el elemento una pulgada y luego simplemente lo eliminó. Realmente me gustaría mantener el rebote en lugar de solo una relajación cúbica o lineal.
Uno de mis colegas ha escrito una biblioteca de micro ofreciendo un repliegue limitado a JS Transiciones: http://blogs.msdn.com/b/eternalcoding/archive/2011/12/06/css3-transitions.aspx
TRANSITIONSHELPER.computeCubicBezierCurveInterpolation = function (t, x1, y1, x2, y2) {
// Extract X (which is equal to time here)
var f0 = 1 - 3 * x2 + 3 * x1;
var f1 = 3 * x2 - 6 * x1;
var f2 = 3 * x1;
var refinedT = t;
for (var i = 0; i < 5; i++) {
var refinedT2 = refinedT * refinedT;
var refinedT3 = refinedT2 * refinedT;
var x = f0 * refinedT3 + f1 * refinedT2 + f2 * refinedT;
var slope = 1.0/(3.0 * f0 * refinedT2 + 2.0 * f1 * refinedT + f2);
refinedT -= (x - t) * slope;
refinedT = Math.min(1, Math.max(0, refinedT));
}
// Resolve cubic bezier for the given x
return 3 * Math.pow(1 - refinedT, 2) * refinedT * y1 +
3 * (1 - refinedT) * Math.pow(refinedT, 2) * y2 +
Math.pow(refinedT, 3);
};
Tal vez podría ser suficiente, o una buena base para lograr lo que es que usted está buscando?
adiós,
David
Una transición simple de YUI3: YUI(). Use ('nodo', 'transición', función (Y) {Y.one ('# mynode'). Transición (opacidad: 0);}); – PottyBert
jaja, eso es simple?deberías ver el simple de jquery ... porque eso no es simple en comparación con Jquery. –
sí, es simple. También incluye el sandbox YUI para evitar la interferencia externa de tu código – PottyBert