CSS3动画的Javascript降级解决方案

Question

我一直在为 iPad 应用程序创建许多小型厚客户端 JavaScript 应用程序，这些应用程序在 UIWebview 中加载相关应用程序。我现在正在制作它们跨浏览器，并且需要使用 JavaScript 合并一些 CSS 动画和过渡的回退。

我的 webkit 特定实现对所有动画/转换使用 CSS 类，其开始和结束状态在设计时是已知的，使用 javascript 中的添加/删除类并利用相关的 webkitTransitionEnd/webkitAnimationEnd 事件。

对于“动态”过渡，我有一个简单的“动画”功能，它只将样式属性应用于相关元素。

我想通过简单的添加/删除类等，使用于应用转换的内部 API 尽可能类似于当前实现。我通常有一个应用程序的 CSS 和 js 文件(均已缩小)。

所以有几个问题/要点，我将不胜感激:

1. IE7/8 问题 - IE9.js

2. 动态添加特定于 vendor 的前缀 - 目前已找到“jquery.css3finalize”。

3. 过渡到一个类:'jquery.animateToClass' - 似乎每次应用一个类时都会搜索样式表 - 是否应该在进一步查找时缓存相关类？这很慢/资源匮乏吗？

4. 对于“@keyframe”动画:我想要一个 javascript 对象“表示”每个 CSS3 动画的关键帧。因此，将一个类传递给“doAnimationWithClass”函数将使用普通的 css3 动画(如果在浏览器中可用)，但如果不可用，它将“对象版本”传递给一个函数，该函数将使用 css3 转换(如果可用)链接每个关键帧转换或jQuery.animate(或等效的)，最终达到相同的结果。

例如:

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:

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

animationHash 等的创建可以在客户端完成，或者只是在设计时创建(使用批处理/构建文件)。

对于已经以更明智的方式执行此操作的库的任何想法或指示，我们将不胜感激。

Answer 1

是的，没错。您需要将关键帧设置传输到 js 对象。我认为css动画和关键帧是写动画更好的方法。 JS 动画方式很难维护。这是我的解决方法。我还写了一个小工具，用于将 css 关键帧转换为 js 对象 (css keyframes to js object) .

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

• 演示:http://jsbin.com/uzodut/4/watch