Was sind die "Goldenen Regeln" zu erhöhen CSS3-transition performance auf mobilen Geräten?
Ich bin mit ein paar wirklich einfachen CSS3-übergängen in meiner app, wie im folgenden Beispiel, wo ich versuche, um die Folie in einem div-container von Links nach rechts:
<div id="navi">
<form>
<input>...</input>
</form>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<div id="bg">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
<img src="...">
</div>
#navi{
z-index:2;
position:fixed;
-webkit-transform:translateZ(0);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-webkit-transition:left 0.5s;
left:0;
top:0;
bottom:0;
width:95%;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.slidein{
left:500px;
}
To slide in/out div ich:
$("#navi").toggleClass("slidein");
Auf meinem iPhone 4s dieser übergang ist sehr glatt. Auf einem iPhone 4 die performance ist schrecklich.
Gibt es irgendetwas, das ich tun kann, um die Leistung zu erhöhen? Gibt es irgendwelche "goldene " Regeln" oder best practices?
So weit ich weiß nur von:
- Verwenden
-webkit-transform:translateZ(0)
auslösen hardware-Beschleunigung - Verwenden -webkit-transform-style: preserve-3d;
- Verwenden -webkit-backface-visibility: hidden;
- Vermeiden Sie Farbverläufe
- Vermeiden, box-shadow
Einer meiner größten Probleme ist, dass es eine ganze Menge von Gegenständen, die sich im #navi
wie ein <ul>
mit vielen <li>
Elemente.
Unter #navi
es ist auch ein weiteres div-element mit einer sehr großen Bildern. Diese scheinen eine schlechtere Leistung als gut (zumindest die Leistung geht nach oben wenn ich display:none
auf Sie, aber das ist keine option, da müssen Sie sichtbar sein, während der slide-übergang).
Du musst angemeldet sein, um einen Kommentar abzugeben.
Versuchen zu animieren
transform
stattleft
Eigenschaft, es funktioniert wirklich glatt, auch auf alten iOS-Geräten.Fiddle: http://jsfiddle.net/x8zQY/2/
2017/01 update: Bitte Lesen Sie diesen großen Artikel über animation & GPU-rendering, profiling und Optimierung von Techniken https://www.smashingmagazine.com/2016/12/gpu-animation-doing-it-right/
translateZ(0)
undleft
- Eigenschaft gibt die gleiche Wirkung wie dein Vorschlag.-webkit-transform: translate3d(0, 0, 0);
zubox1
auf hardware-Beschleunigung aktivieren 😉translate3D
ist viel besser, als wenn der übergang überleft
.