CSS3 Переход от нормального положения потока к абсолютному - PullRequest
Новая
       5

CSS3 Переход от нормального положения потока к абсолютному

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

Я ударил этот пару раз в прошлом и никогда не уходил с хорошим решением. Если у меня есть несколько элементов HTML, которые расположены в соответствии с естественным потоком документов. Для примера, скажем, это простой стек div с. Я хотел бы использовать переходы CSS3, чтобы плавно переместить один из этих элементов в фиксированное положение страницы (скажем, 0,0), а затем вернуться в его нормальное положение.

Проблема заключается в том, что изменение атрибута стиля position на absolute или fixed, если его там не было, приведет к тому, что позиция будет привязана и игнорирует любые инструкции перехода. Таким образом, я мог бы предположить, что любой такой переход будет включать в себя некоторый компонент javascript, чтобы выяснить, где находится элемент в данный момент и как далеко он находится от желаемой точки, и так далее, а затем динамически создавать стиль CSS из этого.

Это похоже на то, что нужно пережить что-то вроде тривиального случая. Есть ли лучший способ?

1 Ответ

3 голосов
/ 19 января 2012

Да, было бы здорово, что мы могли бы перейти от статического положения к абсолютному, но реально я не думаю, что это произойдет в ближайшее время (если вообще когда-либо). Я был бы счастлив просто иметь возможность перейти с height: px на height: auto;.

Я предполагаю, что существует некоторый компромисс, когда браузер должен выполнить вычисление для интерполяции между двумя «несовместимыми» значениями. Итак, если вы установите height: 20px, а затем захотите перейти на height: auto, браузер должен будет представить , что произойдет, если у него будет автоматическое определение местоположения, и вычисления могут стать интенсивными. Он также не реализован в jQuery, так что я думаю, что он нарушает некоторые тесты, или он просто хакерский.

Если вы разрабатываете свой CSS, зная, что вам понадобится абсолютное положение, чтобы всегда ссылаться на окно, тогда javascript значительно проще: вам просто нужно переключиться между его смещением и 0, 0. 

$(".hover").on("mouseover", function(){
    $(this).css({
        top: $(this).offset().top * -1,
        left: $(this).offset().left * -1
    })
});

http://jsfiddle.net/crUFY/

Более надежное решение будет включать клонирование элемента dom и сокрытие оригинала, а затем анимирование клона в верхней части окна. Таким образом, вы можете применить положение: относительно родительских элементов.

...