小编Var*_*N R的帖子

我使用angular-material的md-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"> …