Question

我正在编写一个私人框架＆＃39;为了在不需要jQuery的情况下获得一些基本效果。我刚刚为淡入/淡出编写了一些代码，基本上我所做的是添加/删除类，并检查动画支持。

这是JavaScript部分（请主要查看fadeIn，fadeOut属性）：

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;
        }
    }

};

正如你所看到的，我不得不推迟添加动画类，因为没有那个超时，动画在Chrome（和其他Webkit浏览器）中第二次显示时，它被调用在同一个元素上。但它确实可以在没有超时的情况下在Firefox中运行。

我也在Midori中对此进行了测试，因为它也是一个Webkit浏览器，它也需要超时，但由于某种原因，延迟的延迟甚至超过了25ms。

这是为什么？你能想到还有其他方法吗？我知道这些方法与很多浏览器都不兼容，但我不介意动画没有在其中一些浏览器中显示。谢谢。

CSS动画和JS classList.add的问题

0 个答案: