[英]Javascript degradation solutions for CSS3 animations
I've been creating a number of small thick client JavaScript apps for an iPad app, which loads the relevant app in a UIWebview. 我一直在为iPad应用程序创建一些小型胖客户端JavaScript应用程序,它们在UIWebview中加载相关应用程序。 I am now making them cross browser and need to incorporate some fallbacks for CSS animations and transitions using JavaScript. 我现在正在使用跨浏览器,需要使用JavaScript为CSS动画和过渡添加一些后备。
My webkit specific implementation uses CSS classes for all animations/transitions, for which the start and end states are known at design time, using add/remove class in javascript and utilising the relevant webkitTransitionEnd/webkitAnimationEnd events. 我的webkit特定实现使用CSS类进行所有动画/转换,其中开始和结束状态在设计时已知,使用javascript中的add / remove类并使用相关的webkitTransitionEnd / webkitAnimationEnd事件。
For 'dynamic' transitions I have a simple 'animate' function which just applies styling properties to relevant elements. 对于“动态”过渡,我有一个简单的“动画”功能,它只是将样式属性应用于相关元素。
I would like to keep the internal API for appling transitions as similar as possible to the current implementation by simple adding/removing classes etc. I generally have a CSS and js file (both minified) for an app. 我想保留内部API,通过简单的添加/删除类等来尽可能地将转换应用于当前实现。我通常有一个应用程序的CSS和js文件(都缩小了)。
So a few questions/points that I would appreciate any input on: 所以有几个问题/点我会感激任何输入:
IE7/8 issues - IE9.js IE7 / 8问题 - IE9.js
Dynamically adding vendor specific prefixes - so far found 'jquery.css3finalize'. 动态添加供应商特定的前缀 - 到目前为止找到'jquery.css3finalize'。
Transitioning to a class: 'jquery.animateToClass' - seems to search stylesheet(s) every time a class is applied - should relevant classes be cached on further lookups? 转换到类:'jquery.animateToClass' - 似乎每次应用类时都会搜索样式表 - 是否应该在进一步的查找中缓存相关的类? Is this slow/resource hungry? 这是缓慢的/资源饥饿的吗?
For '@keyframe' animations: I'd like to have a javascript object 'representation' of keyframes of each CSS3 animation. 对于'@keyframe'动画:我想要一个javascript对象'表示'每个CSS3动画的关键帧。 Therefore passing a class to the 'doAnimationWithClass' function would use normal css3 animation if available in the browser but if not it would pass the 'object version' to a function that would chain the each key frame transition using css3 transitions (if available) or jQuery.animate (or equivalent), ultimately arriving at the same result. 因此,将类传递给'doAnimationWithClass'函数将使用普通的css3动画(如果在浏览器中可用),但如果不是,它会将'对象版本'传递给使用css3过渡(如果可用)链接每个关键帧过渡的函数或jQuery.animate(或等效的),最终得出相同的结果。
So for instance: 例如:
CSS: CSS:
@-webkit-keyframes an-animation {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.an-animation {
-webkit-animation-name: an-animation;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 2;
}
JS: JS:
var animations = {
an-animation: {
keyframes: [
{
duration: '',
timing: 'linear',
props: {
opacity: 0
}
},
{
duration: '0.5s',
timing: 'linear',
props: {
opacity: 1
}
},
{
duration: '0.5s',
timing: 'linear',
props: {
opacity: 0
}
}
]
}
};
var animationClasses = [
an-animation: {
name: 'an-animation';
duration: '1s';
timing: 'linear';
count: 2;
}
];
function doAnimationWithClass(className) {
if (modernizer.cssanimations) {
//normal implementation
}
else {
//lookup class in animationclasses
//lookup relevant animation object in animationHash
//pass to animation chaining function
}
}
The creation of animationHash etc could be done client side, or simply created at design time (with a batch/build file). animationHash等的创建可以在客户端完成,也可以在设计时创建(使用批处理/构建文件)。
Any thoughts or pointers to a library that already does this in a more sensible way would be appreciated. 任何想法或指向已经以更明智的方式做到这一点的图书馆的人都会受到赞赏。
Yes, that's right. 是的,这是正确的。 You need to transfer keyframes setting to js object. 您需要将关键帧设置传输到js对象。 I think css animation and keyframe is a better way to write animation. 我认为css动画和关键帧是一种更好的编写动画的方法。 JS animation way is hardly to maintain. JS动画方式很难维护。 Here is my workaround solution. 这是我的解决方案。 And I also write a small tool for translating css keyframes to js object (css keyframes to js object) . 我还编写了一个小工具,用于将css关键帧转换为js对象(css关键帧到js对象) 。
var myFrame = {
'0%': {
left: 0,
top: 0
},
'25%': {
left: 100,
top: 100
},
'50%': {
left: 0,
top: 300
},
'100%': {
left: 0,
top: 0
}
};
var keyframes = {
set: function($el, frames, duration) {
var animate;
animate = function() {
var spendTime;
spendTime = 0;
$.each(frames, function(idx, val) {
var stepDuration, stepPercentage;
stepPercentage = idx.replace('%', '') / 100;
stepDuration = duration * stepPercentage - spendTime;
$el.animate(val, stepDuration);
return spendTime += stepDuration;
});
return setTimeout(animate, duration);
};
return animate();
}
};
keyframes.set($('#mydiv'), myFrame, 2000);
Blackbingo, you answer served to me perfectly. 布莱克宾,你回答完美地服务于我。 I added the easing option, to implement a jquery fallback for ie8 in a parallax starfield (see CSS parallax background of stars ) like this: 我添加了缓动选项,在视差星域中实现了ie8的jquery回退(参见明星的CSS视差背景 ),如下所示:
var animations = {
'STAR-MOVE': {
'0%': {
'background-position-x': '5%',
'background-position-y': '5%'
},
'100%': {
'background-position-x': '1300%',
'background-position-y': '600%'
}
}
};
var keyframes = {
set: function($el, frames, duration, easing) {
var animate;
animate = function() {
var spendTime;
spendTime = 0;
$.each(frames, function(idx, val) {
var stepDuration, stepPercentage;
stepPercentage = idx.replace('%', '') / 100;
stepDuration = duration * stepPercentage - spendTime;
$el.animate(val, stepDuration, easing);
return spendTime += stepDuration;
});
return setTimeout(animate, duration);
};
return animate();
}
};
keyframes.set($('.midground'), animations['STAR-MOVE'], 150000,'linear');
keyframes.set($('.foreground'), animations['STAR-MOVE'], 100000,'linear');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.