Анимация открытия и закрытия панели Sidr не плавная и движется рывками на смартфоне - PullRequest
Новая
       6

Анимация открытия и закрытия панели Sidr не плавная и движется рывками на смартфоне

0 голосов
/ 01 сентября 2018

Я пытаюсь использовать слайд-панель 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();
});

1 Ответ

0 голосов
/ 01 сентября 2018

Одной из возможных проблем может быть слишком большое количество циклов обнаружения изменений. ПК может справиться с этим, телефон не так много. Попробуйте переписать ваше приложение, чтобы оно могло работать с ChangeDetectionStrategy.OnPush.

В любом случае, стоит открывать и закрывать профилировщик, используя chrome devtools. Немного покопавшись, вы можете узнать, какая часть кода расходует ресурсы. Это также может быть *ngFor, которому требуется trackBy, потому что он продолжает создавать элементы.

На этот вопрос нельзя ответить только с помощью кода, который вы дали, и он требует тщательного изучения с вашей стороны. С другой стороны, использование jQuery в сочетании с Angular не одобряется, но давайте не будем раскрывать эту банку с червями:)

...