javascript - Sidr 面板的打开和关闭动画不流畅，在智能手机上出现抖动现象

Question

我正在尝试使用 Sidr ( berriart.com/sidr ) 滑动面板，一切正常，但在智能手机上，打开和关闭动画不流畅，移动时有抖动。有没有办法让动画流畅？

<div class="app">

  <span id="menu-badge" class="dx-badge" style="display:none;"></span>

  <div id="sidr">
    <dx-list 
      #notificationsList 
      [dataSource]="menu.items" 
      [pullRefreshEnabled]="false" 
      (onItemClick)="menu.itemClick($event)">
      <div *dxTemplate="let item of 'item'" class="slideout-menu">
        <fa *ngIf="item.icon.indexOf('fa')==0" name="{{item.icon}}"></fa>
        <i *ngIf="item.icon.indexOf('glyphicon')==0" class="{{item.icon}}"></i>&nbsp;{{item.text}}
      </div>   
    </dx-list>
  </div>

  <dx-toolbar
    *ngIf="authorized && loaded"
    #appToolbar id="appToolbar" 
    [dataSource]="menu.toolbarItems" 
    (onInitialized)="onToolbarInitialized($event)">
    <div *dxTemplate="let data of 'title'">
      <div class="app-header">{{menu.appHeaderText}}</div>
    </div>
  </dx-toolbar>

  <router-outlet *ngIf="authorized && loaded"></router-outlet>
</div>

在 .ts 文件中:

$(document).ready(function() {
    $('#simple-menu').sidr();
});

Answer 1

一个可能的问题可能是正在进行太多的更改检测周期。电脑可以处理这个问题，手机则不行。尝试重写您的应用，使其可以与 ChangeDetectionStrategy.OnPush 配合使用。

无论哪种方式，在打开和关闭时都值得使用 chrome devtools 运行分析器。稍加挖掘，您就可以找出代码的哪一部分正在耗尽资源。它也可能是一个需要 trackBy 的 *ngFor，因为它不断创建元素。

仅通过您提供的代码无法真正回答这个问题，需要您进行适当的调查。另一方面，将 jQuery 与 Angular 结合使用是不受欢迎的，但我们不要打开这个蠕虫 jar :)