html - 在屏幕外翻译元素的最佳方式？

Question

我使用 CSS3 转换已有一段时间了，但有一个小问题是百分比与您要移动的元素有关，而不是与父元素有关。这是有道理的，但它会带来一些我不确定最佳解决方法的情况。

例如，如果我们想象一个元素绝对定位在屏幕上，您将如何将该元素转移到屏幕外？元素的尺寸可能很小，例如 200x200 像素，这意味着您不能在不进行一些计算的情况下使用百分比。

我在脑海中精简的选项是:

1) 将元素放入屏幕大小的容器中，然后将容器平移 100%。

2) 使用 translateZ、will-change 或 translate3d 将元素提升到其自己的 GPU 层，然后应用适当的左/右属性。

3) 使用 getBoundingClientRect 确定元素相对于视口(viewport)的位置，进行计算以确定为了使元素离开屏幕而需要应用的像素距离，然后将该值应用为内联翻译样式。

我能得到一些处理这种情况的最佳方法的建议吗？需要考虑的因素是该技术将用于响应式站点，因此任何值计算都需要在应用该技术之前立即完成。

Answer 1

我将某些东西定位在屏幕外或父元素之外所做的是使用位置属性。对我来说这似乎很自然；上/左/右/下是可动画的，所以它们过渡得很好；第三个好处是对这些属性有很好的支持，所以即使浏览器很古老，回退也是定位工作而不是过渡。

考虑以下几点:

<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*/
}