Esiste un framework javascript che utilizzerà le transizioni CSS3 per effetti come cambiare l'opacità o spostare elementi, ma tornerà a utilizzare javascript setInterval/setTimeout se non è supportato?Transizioni CSS3 con Fallback Javascript
Estrai il modulo di transizione YUI 3, si fa proprio questo.
Si potrebbe guardare con http://www.modernizr.com/
che sembra buona per rilevare il sostegno alle trasformazioni. Ho anche notato che mootools ha: http://mootools.net/docs/core/Fx/Fx.Tween e http://mootools.net/forge/p/fx_tween_css3 – benmmurphy
Modernizr è il modo più efficace di controllo delle funzionalità al momento e a 3kb, è davvero leggero (rispetto a Mootools) – Jeepstone
LOL ovviamente Modernizr è più piccolo di MooTools è un kit di rilevamento non un Framework per manipolazione dom, astrazione di classe e scripting serveride – rgb
Check out Addy Osmani's article. Si tratta di una buona sintesi delle soluzioni attuali con jQuery, in particolare:
Per riassumere, ci sono alcuni plugin per grandi quadri (vedi altre risposte):
Altri quadri già utilizzano le transizioni CSS, se possibile:
Esistono micro-biblioteche?
purtroppo nessuna di queste alternative sembra consentirvi di utilizzare le attenuazioni, come il rimbalzo.
Il mio tentativo di utilizzare animate-enhanced ha spostato l'elemento di un pollice e poi lo ha rimosso. Mi piacerebbe davvero mantenere il rimbalzo invece di un semplice allentamento cubico o lineare.
Uno dei miei colleghi ha scritto un micro biblioteca che offre un numero limitato di fallback JS per Transitions: 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);
};
Forse potrebbe essere abbastanza o una buona base per raggiungere ciò che è che stai cercando?
Bye,
David
Una semplice transizione YUI3: YUI(). Use ('node', 'transition', function (Y) {Y.one ('# mynode'). Transition (opacity: 0);}); – PottyBert
lol è semplice?dovresti controllare jquery è semplice ... perché non è semplice rispetto a Jquery. –
sì, è semplice. Include anche la sandbox YUI per evitare interferenze esterne del codice – PottyBert