How to disable mani-content animation on initial load?

Question

I am using the <ejs-sidebar> in angular. I am using the [isOpen] to keep it open in the initial state. But, when the sidebar is open on page load the main-content animates from left to right. Is there a way to disable the animation on main-content for page load when the sidebar is open by default? i don't think you need a reproducible for this. Just in case, I am attaching this example of yours. Here the main-content animates on page load. How to disable it?

https://stackblitz.com/run?file=app.component.html

Keerthana Rajendran · Answer

Hi Amarender,Thanks for contacting Syncfusion support.You
can disable the animation for the Sidebar component by adding the
following CSS to your app.component.css file.

[app.component.css]
  .e-content-animation {
      transition: none !important;
  }

For your reference, we have attached the sample in the below link.Sample link: https://stackblitz.com/edit/angular-fvbwki?file=app.component.cssPlease let us know if you need any further assistance.Regards,Keerthana
R.

Amarender Tangella · Answer

Thanks. Actually, I tried this and not expecting this response. This disabled the animation completely. My question is "How to disable mani-content animation on initial load?" ​I want the animation to be there but don't want it to be when the menu is set [isOpen]=true. So If I set this property

[isOpen]=true

, the menu will be open on load, and the main-content slides from left behind the menu. I don't want main-content from slide under the menu when it is in open state.To keep it simple, When the menu is open on page load, I don't want the main-content to slide from all the way left(which looks like it is behind the menu). Attaching your example, as you see the menu slides from under the menu on page load. Please let me know if you don't get my question, I can explain it in more detail with images.https://stackblitz.com/edit/angular-fvbwki-g6swrk?file=app.component.css

Keerthana Rajendran · Answer

Hi Amarender,You
can disable the main-content animation on the initial page load for
the Sidebar Component by adding a custom class name for main content during
initial rendering and remove this class name once the ListView is rendered.Refer
to the following codes of app.component.css and app.component.html file.

[app.component.css]
  .e-custom-content {
    transition: none !important;
  }
   
  [app.component.html]
   
  <ejs-listview
        id="listView"
        #listview
        cssClass="e-list-template"
        [dataSource]="inboxData"
        [fields]="fields"
        (select)="onListSelect($event)"
        class="e-custom-content"
        (actionComplete)="onComplete($event)"
      >

We have attached the sample for your reference.Sample link: https://stackblitz.com/edit/angular-fvbwki-zuz37h?file=app.component.htmlPlease let us know if you need any further assistance.Regards,Keerthana
R.