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

Answer 2

我决定删除动画，如下所示：

我查看了AngularMaterial CSS文件并删除了对动画的所有引用。 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;
}

----编辑----

同样更新到AngularMaterial的最新版本，与先前版本相比，v1.0.0-rc4似乎有了全面改进。

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

2 个答案: