是否有一个javascript框架将使用CSS3 Transitions来改变不透明度或移动元素等效果但是如果不支持则会回退到使用javascript setInterval / setTimeout?
查看YUI 3 Transition模块,就是这样。
Check out Addy Osmani's article . It is a good summary of the current solutions with jQuery, specifically:
One of my colleagues has written a micro library offering a limited JS fallback to 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);
};
Maybe it could be enough or a good base to achieve what's you're looking for?
Bye,
David
To sum it up, there are some plugins for big frameworks (see other answers):
Other frameworks already use CSS transitions where possible:
Are there any micro-libraries?
sadly none of these alternatives seem to allow you to use the easings, like bounce.
My attempt to use animate-enhanced moved the element an inch and then just removed it. I really would like to keep the bounce instead of just a cubic or linear easing.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.