sidenav animasyon performansı açısal malzeme nasıl geliştirilir

Question

Ben köşeli malzeme md-sidenav kullanarak bir sidenav yaptım ve aşağıda ekran görüntüsüdür. Sidenav için butona tıkladığımda animasyonlar oldukça gecikmeli. En üstteki çubukta bir resim kullandım ve kalanları yazı tipi harika simgeleriyle yazdım. Ne kötü yapabilirdim ki bu yavaştır. Mobilde görüntülediğimde animasyonlar daha da kötü. performans ve sidenav ait animasyonları üzerinde kalmış gerçek alırken bir sonra

: sidenav ait

Ekran Görüntüsü:

<md-sidenav class="boxme-sidenav" layout="column" hide-gt-sm class="md-sidenav-left md-whiteframe-z2" md-component-id="left"> 
    <div layout="coloumn" style="z-index:1000;box-shadow:2px 0px 10px grey;"> 
     <div flex class="sidenav-logo"> 
      <img ng-src="{{mainLogo}}" alt=""> 
     </div> 
    </div> 
    <md-list style="background-color:#00B0FF;color:white;z-index:10;"> 
     <md-list-item class="md-2-line sidenav-list" layout-padding> 
      <md-button href="" layout-align="space-around center"> 
      <i class="fa fa-size fa-briefcase"></i> 
       <span class="md-body-2">Dashboard</span> 
      </md-button> 
     </md-list-item> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""> 
       <i class="fa fa-size fa-user"></i> 
       <span>My Stuff</span> 
      </md-button> 
     </md-list-item> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""> 
       <i class="fa fa-size fa-file-o"></i> 
       <span>Order History</span> 
      </md-button> 
     </md-list-item> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""> 
       <i class="fa fa-size fa-credit-card"></i> 
       <span>Billing</span> 
      </md-button> 
     </md-list-item> 
     <md-divider></md-divider> 
     <md-subheader style="background-color:#00B0FF;color:white;">Manage the items</md-subheader><!--You can use md-no-sticky class--> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""><i class="fa fa-size fa-user"></i> Pickup my stuff</md-button> 
     </md-list-item> 
     <md-list-item class="md-2-line sidenav-list" layout-padding layout-align="start center"> 
      <md-button href=""><i class="fa fa-size fa-user"></i> Deliver my stuff</md-button> 
     </md-list-item> 
    </md-list> 
</md-sidenav> 

Not: Burada

sidenav ait kodudur ağ.

Answer 1

O şöyle Sadece animasyon kaldırma kararı

.md-sidenav-backdrop { 
    opacity: 0 !important; 
} 

md-sidenav.md-closed-add, 
md-sidenav.md-closed-remove { 
    -webkit-transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important; 
    transition: all .4s cubic-bezier(0.25, .8, .25, 1) !important; 
} 

Answer 2

dava için doğru çözüm, ancak devre dışı fon ve (telefonda bile) benim için kabul edilebilir ekleme 1 çimdik yapılan geçiş performansı olmayabilir:

AngularMaterial CSS dosyasını inceledim ve animasyonlara yapılan tüm referansları kaldırdım. KA-BOOM!

/** 
* fix md-sidenav lag by removing animation 
**/ 

.md-sidenav-backdrop { 
    opacity: 0 !important; 
} 

md-sidenav.md-closed-add, 
md-sidenav.md-closed-remove, 
md-sidenav.md-closed-add.md-closed-add-active, 
md-sidenav.md-closed-remove.md-closed-remove-active, 
md-sidenav.md-locked-open-remove-active, 
md-sidenav.md-closed.md-locked-open-add-active 

{ 
    -webkit-transition: none !important; 
    transition: none !important; 
} 

---- düzenleme ----

Ayrıca AngularMaterial en son sürümüne güncelleme öncesinde sürümlere kıyasla v1.0.0-rc4 genel gelişmenin var gibi görünüyor.