Wie verbessert man die sidenav animation performance angular material

Question

Ich habe eine sidénav mit angular-materials md-sidenav gemacht und unten ist der Screenshot davon. Wenn ich versuche, klicken Sie auf den Button für sidlenav die Animationen ziemlich nacheilend. Ich habe ein Bild auf der oberen Leiste verwendet und der Rest nur Text mit font-awesome Icons. Was könnte ich möglicherweise schlecht machen, dass es langsam ist. Die Animationen sind noch schlimmer, wenn ich es auf dem Handy ansehe.

Screenshot von sidenav:

Hier ist der Code von sidenav:

<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> 

Hinweis:

Nach einer Weile die Leistung und Animationen von sidenav get real hinken auf das Netz.

Answer 1

Es kann nicht richtige Lösung für Ihren Fall sein, aber deaktivieren Kulisse und das Hinzufügen von 1 zwicken gemacht Übergang Leistung akzeptabel für mich (auch am Telefon)

.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

ich beschlossen, nur die Animation zu entfernen, wie folgt:

Ich schaute durch die AngularMaterial CSS-Datei und entfernte alle Verweise auf Animationen. 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; 
} 

---- ---- bearbeiten

auch ein Update auf die neueste Version von AngularMaterial scheint es zu früheren Versionen eine allgemeine Verbesserung in v1.0.0-rc4 im Vergleich zu sein.