Решения для деградации Javascript для анимации CSS3

Question

Я создал несколько небольших приложений JavaScript для толстых клиентов для приложения iPad, которое загружает соответствующее приложение в UIWebview.Сейчас я делаю их кросс-браузерными, и мне нужно включить некоторые запасные варианты для CSS-анимаций и переходов с использованием JavaScript.

Моя конкретная реализация webkit использует CSS-классы для всех анимаций / переходов, для которых начальное и конечное состояния известны ввремя разработки, используя класс add / remove в javascript и используя соответствующие события webkitTransitionEnd / webkitAnimationEnd.

Для «динамических» переходов у меня есть простая функция «animate», которая просто применяет свойства стиля к соответствующим элементам.

Мне бы хотелось, чтобы внутренний API для применения переходов был максимально похож на текущую реализацию путем простого добавления / удаления классов и т. Д. У меня обычно есть файл CSS и js (оба уменьшены) для приложения.

Итак, несколько вопросов / пунктов, по которым я был бы признателен за любой вклад:

1. IE7 / 8 Issues - 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

Блэкбинго, ваш ответ послужил мне идеально. Я добавил опцию замедления, чтобы реализовать отступление jquery для ie8 в звездном поле параллакса (см. 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/