如何改善sidenav动画性能角度材料

Question

我使用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">
            <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;
}