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

Question

Я пытаюсь сделать макет страницы, в котором есть разделы, которые скользят и выходили, когда они перемещались. Каждый раздел заполняет экран (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. Луи Реми., что просто применяет -то -рефикс -трансляцию к контейнеру вместе с новыми значениями смещения при вызываемом animate ().

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

Любая помощь очень ценится.

Answer 1

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

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

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

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