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

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

Моя конкретная реализация webkit использует классы CSS для всех анимаций / переходов, для которых начальное и конечное состояния известны во время разработки, с использованием класса добавления / удаления в javascript и использования соответствующих событий 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
  }
}

The creation of animationHash etc could be done client side, or simply created at design time (with a batch/build file).

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


javascript animation css cross-browser graceful-degradation
person grookle    schedule 18.05.2011    source источник
comment
Вы все еще создаете веб-приложение только для мобильных устройств?   -  person AshHeskes    schedule 21.07.2011

Ответы (3)


arrow_upward
2
arrow_downward

Да все верно. Вам необходимо передать настройку ключевых кадров в объект 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);
person Blackbingo Yan    schedule 18.08.2012

arrow_upward
1
arrow_downward

Вот несколько важных указателей http://addyosmani.com/blog/css3transitions-jquery/

person Dennkster    schedule 12.06.2011

arrow_upward
1
arrow_downward

Блэкбинго, ваш ответ послужил мне идеально. Я добавил опцию ослабления, чтобы реализовать резервный jquery для ie8 в звездном поле параллакса (см. CSS parallax background звезд) вот так:

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');
person Hermes    schedule 09.07.2013