Лучший способ перевести элемент за пределы экрана?

Question

Я использовал CSS3-преобразования на некоторое время, но одна вещь, которая была небольшим ошибкой, состоит в том, что проценты относятся к перемещаемому элементу, а не к родительскому элементу. Это имеет смысл, но это приводит к нескольким ситуациям, которые я не уверен в лучшем способе решения.

Например, если бы мы представили элемент, абсолютно расположенный на экране, как бы вы перешли этот элемент за пределы экрана? Размеры элемента могут быть чем-то маленьким, как 200x200 пикселей, то есть вы не можете использовать проценты без каких-либо вычислений.

варианты я свел его в моей голове:

1) Поместите элемент внутри контейнера, который является размером экрана, а затем перевести контейнер на 100%.

2) Продвиньте элемент на свой собственный уровень графического процессора с помощью translateZ, измените или переведите3d, а затем примените соответствующие свойства влево/вправо.

3) Используйте getBoundingClientRect, чтобы определить, где элемент относится к области просмотра, выполните расчет, чтобы определить расстояние в пикселях, которое необходимо применить, чтобы заставить элемент покинуть экран, а затем применить это значение как встроенный стиль перевода.

Могу ли я получить совет по наилучшему способу справиться с такой ситуацией? Факторы, которые следует учитывать, заключаются в том, что этот метод будет использоваться на быстродействующем сайте, поэтому любой расчет стоимости должен быть сделан непосредственно перед применением метода.

Answer 1

Что я делаю, чтобы позиционировать что-то вне экрана или вне родителя, это использовать свойства позиции. Для меня это кажется естественным; top/left/right/bottom - анимативны, поэтому они легко переключаются; и третье преимущество заключается в том, что есть большая поддержка этих свойств, поэтому, даже если браузер является древним, резервное копирование - это позиционирование, а не переход.

Рассмотрим следующий пример:

<div class="parent"> 
    <div class="from-the-bottom"></div> 
</div> 

CSS:

.parent { 
    height: 400px; 
    width: 400px; 
    background-color: #ccc; 
    position: relative; /*Make sure the parent has positioning*/ 
    overflow: hidden; /*Hide its overflow*/ 
} 

.from-the-bottom { 
    width: 100px; 
    height: 100px; 
    position: absolute; 
    top: 100%; /*100% top pushes the element fully out of view at the bottom*/ 
    left: 0; 
    right: 0; 
    background-color: yellowgreen; 
    transition: top .3s ease; 
} 

.parent:hover .from-the-bottom { 
    top: 0; /*Changing the top value positions the element within the context of it's parent*/ 
}