我使用了angular-material的md-sidenav创建了sidenav,下面是它的截图.当我尝试点击sidenav按钮时,动画相当滞后.我已经在顶部栏上使用了一个图像,其余的只是使用字体很棒的图标.我可能做得很糟糕,它很慢.当我在移动设备上查看动画时,动画会更糟.
sidenav的屏幕截图:
这是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>
注意 :
一段时间后,sidenav的性能和动画在网络上真正落后.