The opening and closing animation of the Sidr panel is not smooth and moving with jerks on smartphone

Question

I am trying to use Sidr (berriart.com/sidr) slide panel and everything works but on smartphone the opening and closing animation is not smooth, moving with jerks. Is there a solution to make the animation smooth?

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

and in .ts file:

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

Answer 1

One possible issue could be that there are too many change detection cycles going on. A pc can handle this, a phone not so much. Try rewriting your app so it can work with the ChangeDetectionStrategy.OnPush.

Either way, it's worth running a profiler using the chrome devtools, while opening and closing. With a little digging, you can find out what part of code is using up the resources. It could as well be an *ngFor that needs a trackBy because it keeps creating elements.

This question cannot really be answered by just the code you gave, and needs proper investigation on your hand. On the other hand, to use jQuery in combination with Angular is frowned upon, but let's not open that can of worms :)