CSS3動畫的Javascript降級解決方案

Question

我一直在為iPad應用程序創建一些小型胖客戶端JavaScript應用程序，它們在UIWebview中加載相關應用程序。 我現在正在使用跨瀏覽器，需要使用JavaScript為CSS動畫和過渡添加一些后備。

我的webkit特定實現使用CSS類進行所有動畫/轉換，其中開始和結束狀態在設計時已知，使用javascript中的add / remove類並使用相關的webkitTransitionEnd / webkitAnimationEnd事件。

對於“動態”過渡，我有一個簡單的“動畫”功能，它只是將樣式屬性應用於相關元素。

我想保留內部API，通過簡單的添加/刪除類等來盡可能地將轉換應用於當前實現。我通常有一個應用程序的CSS和js文件（都縮小了）。

所以有幾個問題/點我會感激任何輸入：

1. IE7 / 8問題 - IE9.js

2. 動態添加供應商特定的前綴 - 到目前為止找到'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關鍵幀到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

布萊克賓，你回答完美地服務於我。 我添加了緩動選項，在視差星域中實現了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');

Answer 3

以下是一些重要的指示http://addyosmani.com/blog/css3transitions-jquery/