angularjs - 如何提高sidenav动画性能 Angular Material

Question

我使用 Angular-Material 的 md-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 的性能和动画在网络上变得真正滞后。

Answer 1

这可能不是适合您情况的正确解决方案，但禁用背景并添加 1 个调整使过渡性能对我来说可以接受(即使在手机上)

.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;
}