用于 CSS3 动画的 Javascript 降级解决方案

Question

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

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

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

我想通过简单的添加/删除类等来保持用于应用转换的内部 API 尽可能与当前实现相似。我通常有一个应用程序的 CSS 和 js 文件（都缩小了）。

因此，我将不胜感激的几个问题/要点：

1. IE7/8 问题 - IE9.js

2. 动态添加供应商特定的前缀 - 到目前为止找到'jquery.css3finalize'。

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

4. 对于"@keyframe"动画：我希望每个CSS3动画的关键帧都有一个javascript对象"表示"。因此，将类传递给"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关键帧到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); 

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

Answer 2

这里有一些重要的提示 http://addyosmani.com/blog/css3transitions-jquery/

Answer 3

Blackbingo，你的回答对我来说很完美。我添加了缓动选项，以便在视差星域中实现 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');