将元素转换为屏幕的最佳方法？

我一直在使用CSS3转换一段时间，但有一点是轻微的bugbear是百分比与你移动的元素相关，而不是父元素。这很有道理，但它带来了一些我不确定解决问题的最佳方式的情况。例如，如果我们想象一个元素完全位于屏幕上，那么您将如何将这个元素转换到屏幕外？元素的尺寸可能像200x200像素一样小，这意味着如果不进行一些计算就不能使用百分比。将元素转换为屏幕的最佳方法？

我已经缩短到在我的头上的选项有：

1）将元素的容器，它的屏幕尺寸内，然后通过100％翻译容器。

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

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

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

来源

2014-10-17 Anthony Hastings

你有一个 “最大支持拍摄分辨率” 或者什么？如果无关紧要*您可以使用足够大的绝对偏移量来移动元素，例如向左或向右移动10000个像素。（顺便说一句，有没有很好的理由，你不能只使用display：none？） – 2014-10-17 13:12:51

@TomasLycken - 这种方法的问题在于你无法很好地控制该动画的速度！特别是没有最大的决议;该问题适用于任何尺寸的分辨率。 – 2014-10-17 15:18:03

以为我会分享这个链接的参考： http://stackoverflow.com/questions/15317020/css3-translate-out-of-screen – 2014-11-11 08:45:44

我做什么来定位屏幕外或父母以外的东西是使用位置属性。对我来说这似乎很自然;上/左/右/下是可以动画的，所以它们转换得很好;第三个好处是对这些属性有很大的支持，所以即使浏览器是古老的，后备是定位工作，而不是过渡。

考虑以下几点：

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

来源

2014-10-17 14:37:57 jme11

但顶部/右/左/底部将不会GPU加速对，并导致重绘？ – 2014-10-17 15:11:29

正确，因此你的选择2.我应该更清楚。再次，我脑海中的好处是它会优雅地退化，当然它也会对父元素起作用。 – jme11 2014-10-17 15:25:04

您是否知道使用translateZ + top/left/right/bottom和translate3d/translate之间的任何性能差异？我总是听到有人说你应该使用translate来移动所有东西，但是没有人提到过使用transformZ + top。 – 2014-10-17 15:48:10

将元素转换为屏幕的最佳方法？

回答

相关问题