javascript - Android 4.4 与 iOS 上的 CSS3 转换缓慢

Question

我正在使用基于关键帧的 CSS3 动画在具有 (.10,.70,.10,1) 贝塞尔曲线的 div 之间滑动，持续时间为 400 毫秒

Android 上的性能(在 HTC One M8 和 S4 上测试，同时使用原生 4.4 WebView 和基于闪烁的人行横道)非常卡顿和卡顿，帧速率非常差。从 4s 到 5s 在 iOS 上的性能是完美的，接近原生性能。

有人可以解释可能导致此问题的原因以及有关如何纠正它的一些建议，是否需要使用基于 javascript 的动画解决方案(如 VelocityJS)？

如果这个问题有点含糊，我深表歉意，但我认为我向这个问题添加大量 CSS 关键帧规则不会对任何人有帮助，所以我将其省略。

这是一个精简的例子，演示了我在说什么

http://jsfiddle.net/hu69H/

(在桌面上运行良好但不完美，并且禁止 iOS 在移动设备上的性能)

这是执行滑动逻辑部分的代码 fragment :

var $ = function (id) {
        "use strict";
        return document.getElementById(id);
    },
    slideOpts = {
        sl: ['slin', 'slout'],
        sr: ['srin', 'srout'],
        popin: ['popin', 'noanim'],
        popout: ['noanim', 'popout'],
        noanim: ['noanim', 'noanim']
    },

function Slide(slideType, vin, vout, callback) {
    var vIn = $(vin),
        vOut = $(vout),
        onAnimationEnd = function () {
            vOut.classList.add('hidden');
            vIn.classList.remove(slideOpts[slideType][0]);
            vOut.classList.remove(slideOpts[slideType][1]);
            vOut.removeEventListener('webkitAnimationEnd', onAnimationEnd, false);
            vOut.removeEventListener('animationend', onAnimationEnd);
        };

    if (slideType == 'noanim'){
        vIn.classList.remove('hidden');
        vOut.classList.add('hidden');

    } else {
        vOut.addEventListener('webkitAnimationEnd', onAnimationEnd, false);
        vOut.addEventListener('animationend', onAnimationEnd);
        if (callback && typeof (callback) === 'function') {
            callback();
        }
        vIn.classList.remove('hidden');
        vIn.classList.add(slideOpts[slideType][0]);
        vOut.classList.add(slideOpts[slideType][1]);
    }  

Answer 1

你有重现这个的示例案例吗？这将有助于确定根本原因..