CSS3動(dòng)畫的硬件加速的問(wèn)題。。
問(wèn)題描述
查資料好像是這么說(shuō)的：CSS3硬件加速觸發(fā)時(shí)候，會(huì)創(chuàng)建一個(gè)新的層，其中的圖像會(huì)用GPU進(jìn)行渲染，來(lái)提高性能。
這樣有了一個(gè)問(wèn)題呀，最近寫東西時(shí)候，發(fā)現(xiàn)如果子級(jí)元素觸發(fā)了硬件加速渲染的動(dòng)畫，如果父級(jí)也是硬件渲染的，就算父級(jí)沒(méi)有動(dòng)畫效果，也會(huì)在硬件渲染層里觸發(fā)父級(jí)的重繪。
下面是我簡(jiǎn)單寫了一個(gè)示例，父級(jí).p用transform屬性來(lái)調(diào)整了下位置，子元素a標(biāo)簽在hover時(shí)觸發(fā)了opacity的過(guò)渡動(dòng)畫效果的話，會(huì)發(fā)現(xiàn)父級(jí)元素也被重繪了。
用谷歌的layer border可以看到：
父級(jí)也在層里面，而且用paint flashing也會(huì)看到，父級(jí)也會(huì)被重繪，而這根本是沒(méi)必要的。。我的實(shí)際情況中，父級(jí)元素內(nèi)還有個(gè)圖片，如果圖片被重繪的話就會(huì)變模糊一段時(shí)間。。。
如果取消了父級(jí)的transform屬性，就不會(huì)觸發(fā)父級(jí)的重繪了。
該怎么辦才能使a標(biāo)簽觸發(fā)動(dòng)畫時(shí)，不讓父元素也跟著重新渲染呢？
想過(guò)更改父元素定位的方法，不用transform了。。。但是貌似還要改dom結(jié)構(gòu)啊。。有沒(méi)有什么設(shè)置可以讓某個(gè)元素禁止使用硬件加速呀。。。
<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title>test2</title> <style>*{ margin: 0; padding: 0; border: none;}body,html{ width: 100%; height: 100%;}.p{ width: 300px; height: 180px; background-color: #888; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}.p a{ position: absolute; width: 40%; height: 80%; top: 10%; opacity: 0; transition: opacity 1s; background-color: #333;}.p a:hover{ opacity: 1;}.prev{ left: 0;}.next{ right: 0;} </style></head><body><p class='p'> <a class='prev'></a> <a class='next'></a></p></body></html>
問(wèn)題解答
回答1：可能概念沒(méi)有描述清楚。chromium/webkit硬件加速中
transform case需要3D變換才會(huì)創(chuàng)建新的合成層 也就是例子中translate3d(-50%,-50%,0)即可。通常啟用使用translateZ(0);
opacity和過(guò)渡/動(dòng)畫case 需要?jiǎng)赢媹?zhí)行的過(guò)程中才會(huì)創(chuàng)建合成層，也就是過(guò)渡或動(dòng)畫沒(méi)有開始或結(jié)束后元素還會(huì)回到之前的狀態(tài)，這也解釋了例子中過(guò)渡開始和結(jié)束父極元素會(huì)重繪，過(guò)程：移除元素（這里元素是渲染內(nèi)部表示RenderObject/Layer，下同）->創(chuàng)建合成層,過(guò)渡動(dòng)畫,刪除合成層->移回元素;
附：這里移除父極的transform就好了可能是因?yàn)閠ransform：translate破壞了父極的渲染層，創(chuàng)建了新渲染層但又未達(dá)到創(chuàng)建合成層（使用硬件加速）的條件，且使得其與其子元素p處于同一個(gè)渲染層（一般情況），子元素的離開和加入使其重繪。（這個(gè)結(jié)論的來(lái)源：使子元素啟用硬件加速，完全脫離父元素，如給其加tranform 3d變換 translateZ(0);）
相關(guān)文章：
1. angular.js - 關(guān)于$apply()2. angular.js使用$resource服務(wù)把數(shù)據(jù)存入mongodb的問(wèn)題。3. MySQL數(shù)據(jù)庫(kù)中文亂碼的原因4. dockerfile - [docker build image失敗- npm install]5. dockerfile - 我用docker build的時(shí)候出現(xiàn)下邊問(wèn)題 麻煩幫我看一下6. 如何解決Centos下Docker服務(wù)啟動(dòng)無(wú)響應(yīng)，且輸入docker命令無(wú)響應(yīng)？7. android-studio - Android Studio 運(yùn)行項(xiàng)目的時(shí)候一堆警告，跑步起來(lái)！？8. nignx - docker內(nèi)nginx 80端口被占用9. angular.js - Ionic 集成crosswalk后生成的apk在android4.4.2上安裝失敗？？？10. mysql - 新浪微博中的關(guān)注功能是如何設(shè)計(jì)表結(jié)構(gòu)的？
網(wǎng)公網(wǎng)安備