Javascript Sidr面板的打开和关闭动画不平滑，在智能手机上移动时会出现抖动

我尝试使用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>

---

一个可能的问题是正在进行的更改检测周期太多。一台个人电脑可以处理这个问题，而一部手机则不然。尝试重新编写应用程序，使其能够与

ChangeDetectionStrategy.OnPush

配合使用

无论哪种方式，在打开和关闭的同时使用ChromeDevTools运行探查器都是值得的。通过一点挖掘，您可以发现代码的哪些部分正在使用资源。它也可以是一个

*ngFor

，需要一个

trackBy

，因为它一直在创建元素

---

这个问题不能仅仅用你给出的代码来回答，需要你进行适当的调查。另一方面，不赞成将jQuery与Angular结合使用，但我们不要打开那罐蠕虫：）

我将尝试制作一个小示例并将其上传到githab

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