將元素轉換爲屏幕的最佳方法？

我一直在使用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

將元素轉換爲屏幕的最佳方法？

回答

相關問題