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

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

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

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


css css-transitions
person Toji    schedule 19.01.2012    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Да, было бы здорово, если бы мы могли перейти от статической позиции к абсолютной, но на самом деле я не думаю, что это произойдет в ближайшее время (если вообще когда-либо). Я был бы счастлив просто перейти с 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 и сокрытие оригинала, а затем анимацию клона в верхней части окна. Таким образом, вы можете применить position: относительно родительских элементов.

person methodofaction    schedule 19.01.2012
comment
Да, я думал, что это будет примерно его размер. Что ж, разработчик может мечтать, верно? Спасибо за скрипку, кстати! Всегда приятно видеть доказательство концепции. - person Toji; 19.01.2012
comment
Я был бы счастлив просто перейти от height: px к height: auto;. переходы max-height в некоторых случаях являются хорошей рабочей заменой этому. Например. переход от max-height: 0px к max-height: 9999px, в конце перехода целевой элемент получит автоматическую высоту. - person Eliot Sykes; 04.12.2013