Вопросы Теги

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

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

Моя конкретная реализация webkit использует классы CSS для всех анимаций / переходов, для которых начальное и конечное состояния известны во время разработки, - кажется, ищет таблицу (ы) стилей каждый раз, когда класс применяется - должны ли соответствующие классы кэшироваться при дальнейших поисках? Это медленный / ресурсоемкий?

  • Для анимации '@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 и т. д. может быть выполнено на стороне клиента или просто создано на время разработки (с пакетным файлом / файлом сборки).

    Приветствуются любые мысли или указатели на библиотеку, которая уже делает это более разумным способом.

    5
    задан Bill the Lizard 26 May 2011 в 13:45
    поделиться