Javascript CSS动画和JS classList.add存在问题
我正在编写一个私有的“框架”,目的是在不需要jQuery的情况下实现一些基本效果。 我刚刚编写了一些淡入淡出的代码,基本上我所做的是添加/删除类,并检查动画支持 以下是JavaScript部分(请主要检查fadeIn和fadeOut属性):Javascript CSS动画和JS classList.add存在问题,javascript,css,class,animation,keyframe,Javascript,Css,Class,Animation,Keyframe,我正在编写一个私有的“框架”,目的是在不需要jQuery的情况下实现一些基本效果。 我刚刚编写了一些淡入淡出的代码,基本上我所做的是添加/删除类,并检查动画支持 以下是JavaScript部分(请主要检查fadeIn和fadeOut属性): var effs={ checkSupport:(函数(){ var init=true; var=false; 返回函数(el){ if(init){ var animationstring='animation', keyframeprefix=“”,
var effs={
checkSupport:(函数(){
var init=true;
var=false;
返回函数(el){
if(init){
var animationstring='animation',
keyframeprefix=“”,
domPrefixes='Webkit Moz O ms Khtml'。拆分(“”),
pfx=“”;
if(el.style.animationName!==未定义){
支持=真;
}
如果(支持===false){
对于(var i=0;i
如您所见,我不得不延迟添加动画类,因为如果没有超时,动画不会在Chrome(和其他Webkit浏览器)中第二次显示,当它在同一元素上调用时。不过,它在Firefox中确实可以工作,没有超时
我还在Midori中测试了这个,因为它也是一个Webkit浏览器,它也需要超时,但由于某些原因,延迟甚至超过25毫秒,这增加了麻烦
为什么会这样?你能想到其他的解决办法吗?我知道这些方法与很多浏览器不太兼容,但我不介意其中一些浏览器中没有显示动画。多谢各位
var effs = {
checkSupport: (function() {
var init = true;
var supports = false;
return function(el) {
if (init) {
var animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '';
if (el.style.animationName !== undefined) {
supports = true;
}
if (supports === false) {
for (var i = 0; i < domPrefixes.length; i++) {
if (el.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
pfx = domPrefixes[i];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
supports = true;
break;
}
}
}
init = false;
}
return supports;
};
}()),
fadeOut: function(el) {
el.style.opacity = 1;
if (this.checkSupport(el)) {
el.classList.remove("fadeIn", "fadeOut");
//Here comes the annoying timeout!
setTimeout(function() {
el.classList.add("fadeOut");
}, 25);
} else {
el.style.opacity = 0;
}
},
fadeIn: function(el) {
el.style.opacity = 0;
if (this.checkSupport(el)) {
el.classList.remove("fadeIn", "fadeOut");
setTimeout(function() {
el.classList.add("fadeIn");
}, 25);
} else {
el.style.opacity = 1;
}
}
};