Анимация позиции в процентах с переходами jQuery и / или CSS3 (через плагин) - PullRequest
Новая
       31

Анимация позиции в процентах с переходами jQuery и / или CSS3 (через плагин)

2 голосов
/ 02 мая 2011

Я пытаюсь создать макет страницы, в которой есть разделы, которые скользят и выходят при переходе к.Каждый раздел заполняет экран (ширина / высота 100%) и позиционируется абсолютно на основе процентного значения.

В прилагаемом образце есть четыре раздела, расположенных следующим образом: 

[a]
[b][c][d]

, где [a] равно 0 0, [b] равно 0 100%, [c] равно 100% 100%, а [d] равно 200% 100%.

Теперь, чтобыДля достижения навигации я поместил все разделы в абсолютно позиционированном 100% на 100% скрытом контейнере.При переходе к разделу «верхнее» и «левое» значения контейнера анимируются с отрицательным значением смещения раздела, например, если выбрано [d], контейнер анимируется до -200% -100%.

Странное поведение предостаточно!При переходе к смещению 0% (влево или вверх) переходы работают нормально.Однако другие комбинации (т.е. отрицательные смещения) приводят к, по-видимому, нелогичным (но непротиворечивым) причудам.

Убедитесь сами: http://www.doronassayas.com/ypsite

Вот краткое изложение:

  • [c] и [d] в [a] или [b] работают нормально.
  • [a] в [b] и [a] в [d]: переход до конца, переход обратно кначало и начало анимации.
  • [a] и [b] - [c] самое странное - до начала перехода все тело (или какой-либо другой элемент высокого уровня?)появляется какое-то визуальное смещение, которое невозможно отследить с помощью CSS (невидимо в Firebug и других инструментах разработки).Таким образом, вместо того, чтобы оказаться в [c], мы заканчиваем в [d] (визуально), хотя значения CSS ясно показывают, что мы должны быть в [c].Выполнение случайных вещей, таких как щелчок в иерархии Firebug, сбрасывает представление в правильное местоположение.WTF?

Протестировано это в Firefox 4, Chrome 10 и Safari 5, и такое же поведение наблюдается во всех браузерах, будь то использование jQuery.animate () или очень крутой jQuery.transition Луи Реми.плагин , который просто применяет -prefix-transition к контейнеру вместе с новыми значениями смещения при вызове animate ().

Согласованность странности меня заинтриговывает.Любые идеи?

Любая помощь с благодарностью.

1 Ответ

1 голос
/ 04 мая 2011

После значительной стрижки волос я наконец диагностировал ошибочное поведение, включив переполнение: auto на элементе body.Оказывается, что позиционные шалости с отрицательными значениями наносят ущерб расчетной ширине и высоте тела, которая постоянно меняется во время переходов (и фактически никогда не остается на 100% окна, что было ожидаемым поведением).Результатом являются колебания полос прокрутки и неправильные положения прокрутки элемента body, хотя и удивительно одинаковые для всех браузеров.

Решение оказалось очень простым: 

body
{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 0;
    margin: 0;
}

Фиксированное положение, которое яникогда не использованный ранее, заставляет элемент body сохранять фиксированный размер и положение, игнорируя любые изменения его содержимого.И вот оно!Прекрасные переходы с аппаратным ускорением там, где они поддерживаются благодаря jQuery и Louis Remi.

...