Existe-t-il un framework javascript qui utilisera CSS3 Transitions pour des effets tels que la modification de l'opacité ou des éléments en mouvement, mais retombera en utilisant javascript setInterval/setTimeout s'il n'est pas supporté?CSS3 Transitions avec Javascript Fallback
Vérifiez le module de transition YUI 3, il est là pour ça.
Vous pouvez regarder à l'aide http://www.modernizr.com/
qui semble bon pour détecter faciliter les transitions. J'ai aussi remarqué que mootools a: http://mootools.net/docs/core/Fx/Fx.Tween et http://mootools.net/forge/p/fx_tween_css3 – benmmurphy
Modernizr est le moyen le plus efficace de vérifier les fonctionnalités en ce moment et à 3kb, il est vraiment léger (comparé à Mootools) – Jeepstone
LOL bien sûr Modernizr est plus petit que MooTools c'est un kit de détection pas un framework pour dom de manipulation, abstraction de classe et scripting côté serveur – rgb
Découvrez Addy Osmani's article. Il est un bon résumé des solutions actuelles avec jQuery, en particulier:
Pour résumer, il y a quelques plugins pour grand cadres (voir d'autres réponses):
D'autres cadres utilisent déjà des transitions CSS si possible:
Existe-t-il des micro-bibliothèques?
Malheureusement, aucune de ces alternatives ne semble vous permettre d'utiliser les easings, comme le rebond.
Ma tentative d'utilisation de l'animation animée a déplacé l'élément d'un pouce, puis l'a simplement supprimé. Je voudrais vraiment garder le rebond au lieu d'un simple relâchement cubique ou linéaire.
Un de mes collègues a écrit une bibliothèque micro offre une solution de repli JS limité aux 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);
};
Peut-être que cela pourrait être suffisant ou une bonne base pour réaliser ce que vous cherchez est?
Bye,
David
Une simple transition YUI3: YUI(). Use ('noeud', 'transition', fonction (Y) {Y.one ('# mynode'). Transition (opacité: 0);}); – PottyBert
lol c'est simple?vous devriez jeter un coup d'œil sur le simple jquery .... parce que ce n'est pas simple par rapport à Jquery. –
oui, c'est simple. Il inclut également le sandbox YUI pour éviter les interférences extérieures de votre code – PottyBert