Y a-t-il une framework JavaScript qui utilisera des transitions CSS3 pour des effets tels que le changement d'opacité ou de déplacement, mais relèvera de l'utilisation de JavaScript seinterval / Settimeout s'il n'est pas pris en charge?
6 Réponses :
Vous pouvez regarder en utilisant http://www.modernizr.com/
Cela semble bon de détecter le soutien des transitions. J'ai également remarqué que Marotools a: motoools.net/docs/core/fx/fx.tween < / a> et motoools.net/forge/p/fx_tween_css3
Modernizr est le moyen le plus efficace de la vérification des fonctionnalités à l'heure et à 3kb, c'est vraiment léger (comparé aux motools)
LOL Bien sûr, la modernisation est plus petite que motoools, c'est une trousse de détection non un cadre de manipulation DOM, d'abstraction de classe et de script serverside
modernizr (évidemment) ne fournit pas de repli JavaScript.
Non, ce n'est pas que cela ne vient pas avec Yepnope qui vous permet de vérifier et de charger les retombées JavaScript où vous le souhaitez.
Découvrez le module de transition YUI 3, cela fait exactement cela.
Une simple transition YUI3: yui (). Utilisez ("nœud", "transition", fonction (y) {y.one ('# mynode'). Transition (opacité: 0);});
lol c'est simple? Vous devriez vérifier que JQuery's Simple's Simple ... Parce que ce n'est pas simple par rapport à jQuery.
Oui, c'est simple. Il inclut également la boîte à sable YUI pour éviter toute interférence extérieure de votre code
Consultez ADDY Osmani's Article . C'est un bon résumé des solutions actuelles avec jQuery, en particulier:
Pour résumer, il y a quelques plug-ins pour les gros frameworks (voir Autres réponses):
D'autres cadres utilisent déjà des transitions CSS dans la mesure du possible:
Malheureusement, aucune de ces alternatives ne semble vous permettre d'utiliser les réalisations, comme le rebond.
Ma tentative d'utilisation d'Animate améliorée a déplacé l'élément un pouce, puis il suffit de l'enlever. Je voudrais vraiment garder le rebond au lieu d'une assouplie cube ou linéaire.
Un de mes collègues a écrit une micro-bibliothèque offrant une cassette JS limitée 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);
};