我正在實現'抽屜'型效果，其中當單擊按鈕時，抽屜從屏幕底部打開。這裏的例子：http://jsfiddle.net/jYcSF/將轉換轉換爲變換以獲得更好的性能

即時通訊使用CSS轉換爲做到這一點：

.drawer { 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    overflow: hidden; 
    background: #333; 
    height: 5px; 
    width: 100%; 
    -webkit-transition: height .25s linear; 
    -moz-transition: height .25s linear; 
    transition: height .25s linear; 
}

然後我使用jQuery來打開抽屜一類是單擊按鈕時：

$('.drawer-open').click(function(e){ 
    $('.drawer').toggleClass('active'); 
    }); 
    $('.drawer-close').click(function(e){ 
    $('.drawer').toggleClass('active'); 
    });

這就允許活動抽屜CSS將生效並激活抽屜的高度並使其從屏幕底部開啓：

.drawer.active { 
    height: 80%; 
}

使用CSS轉換而不是轉換可以達到相同的效果嗎？我試圖確保抽屜的開口儘可能平滑並儘可能自由地擺動。

來源

2014-03-07 CLiown

我覺得對性能的影響是差不多的。這是屏幕重繪，這是問題，並應該是相同的任何方式。你必須測試它。 –

事實上，爲什麼在初始設置並轉換位置時轉換高度？我想這沒有什麼實際意義。 –

答案很簡單..

沒有

其重要的是瞭解這些CS特性背後的原因和差異：

Transform

的CSS轉換屬性，可以修改座標 CSS視覺格式模型的空間。使用它，元素可以被翻譯，根據設置的值旋轉，縮放和傾斜。

Transition

[...]它允許定義一個元件的兩個狀態之間的轉變。

在這種情況下，變換不是一個合適的解決方案，因爲您正在修改一個屬性（高度）而不是三維空間中元素的座標表示。如果你使用transform你可以做的最接近的是scaleY，並給它一個粗略值，你還需要到原點設置爲100%一個y值 - 但你會發現那是什麼，雖然該元素將增長，其內容將被拉伸，因爲您已將其轉換到3d平面上，而不是從屬性角度更改其基礎定義。

Example Fiddle

來源

2014-03-07 16:58:35 SW4

將轉換轉換爲變換以獲得更好的性能

回答

沒有

Example Fiddle

相關問題