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

一个可能的问题是更改检测周期过多。一台PC可以处理这个问题，而电话则不能。尝试重写您的应用程序，使其可以与ChangeDetectionStrategy.OnPush一起使用。

无论哪种方式，在打开和关闭时都值得使用chrome devtools运行探查器。稍加挖掘，便可以找出代码的哪部分正在消耗资源。最好是*ngFor，因为它不断创建元素，因此需要trackBy。

仅通过您提供的代码并不能真正回答这个问题，您需要进行适当的调查。另一方面，将jQuery与Angular结合使用并不受欢迎，但让我们不要打开那些蠕虫病毒的罐头：）

Sidr面板的打开和关闭动画不流畅，并且会随着智能手机上的抖动而移动

1 个答案: