Могу ли я конвертировать с помощью анимации jQuery в CSS3 переходы / преобразования с помощью javascript откат? - PullRequest
Новая
       17

Могу ли я конвертировать с помощью анимации jQuery в CSS3 переходы / преобразования с помощью javascript откат?

0 голосов
/ 19 февраля 2012

Хорошо, вот демоверсия анимации (нажмите на слово HIPSTERS в заголовке): http://jacksongariety.com/

Это довольно просто. Изменяет размер от 100% до 75% и изменяется от 0 до 1. Затем он переворачивается, когда вы нажимаете X. У меня проблемы с производительностью, вызванные javascript setInterval, который jQuery использует для анимации. Я попробовал несколько твиков, и похоже, что мне придется использовать CSS3, что является довольно сложным кодом, который мне не нужен.

Итак, как мне преобразовать эту анимацию jQuery: 

.animate({
        opacity: 0,
        width: '100%',
        height: '100%',
        left: '-50%',
        top: '-50%'
}, {
        duration: 200,
specialEasing: {
        opacity: 'linear',
        width: 'linear',
        height: 'linear',
        marginLeft: 'linear',
        marginTop: 'linear'
}

... в CSS3 переходы / трансформации? Тогда есть ли у старых браузеров запасной вариант к медленной анимации jQuery?

Заранее спасибо!

1 Ответ

4 голосов
/ 19 февраля 2012

Прежде всего - вам понадобятся переходы только для того, что вы делаете.Анимации не поддерживаются так широко, и все, что вы делаете с помощью jQuery animate (), может быть выполнено с переходом (за исключением очень определенных типов переходов, таких как переходы с упругой или отказов).

Я бы добавил этот переход в свой CSSа затем используйте modernizr для обнаружения объектов в javascript.

Например, мой CSS может выглядеть так (это не совсем то, что вы пытаетесь сделать, а пример): 

#lightbox {
  opacity: 0;
  width: 100%;
  height: 100%;
  left: -50%;
  top: -50%;

    -ms-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;

  -webkit-transform: translateZ(0);
}

#lightbox.active {
  left: 0;
  top: 0;
  opacity: 1;
}

Тактеперь скрытое состояние по умолчанию может быть включено или выключено с помощью addClass («активный»).В браузерах, которые поддерживают переходы CSS3, это будет происходить!И для браузеров без поддержки переходов CSS3 элемент с идентификатором лайтбокса просто появится или исчезнет без анимации.Также обратите внимание, что я добавил свойство webkit translateZ.Это хитрость, чтобы получить ускорение GPU при переходах CSS3 в Safari и Chrome.Это очень сильно влияет на производительность, особенно на устройствах iOS.

ОК - так что же теперь, как мы откатимся на jquery.animate для браузеров, которые не поддерживают переходы CSS3?Это где модернизр вступает в игру.Допустим, пользователь нажал кнопку закрытия, и теперь вы хотите, чтобы лайтбокс исчез.Вы должны удалить «активный» класс для браузеров с переходами CSS3 ИЛИ использовать метод jquery.animate для браузеров, которые не поддерживают переходы: 

if(Modernizr.csstransitions){
  $("#lightbox").removeClass("active");
} else {
  $("#lightbox").animate({...});
}

Для получения дополнительной информации о свойстве см .: http://www.modernizr.com/docs/#csstransitions

...