Question

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

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

我把它缩小到我脑海中的选项是：

1）将元素放入一个与屏幕大小相同的容器中，然后将容器翻译100％。

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

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

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

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

在屏幕外翻译元素的最佳方法？

1 个答案: