CODEWITHSUNDEEP
cssionic-framework
Rajeshwar
Rajeshwar

Reputation: 2509

slow down the speed of side menu animation in IONIC

As we start with a new ionic project with 'sidemenu' option and run the app, we will be able to view the side menu when ever we swipe or click on the menu toggle button.

The animation is good when we click on the menu button. But i want slow the animation speed for the side menu. So that when i click on the button, the side menu will appear slowly.

Is there a way to override the default CSS or is there a way to customizse the animation speed of side menu in IONIC? If so please help me on this.

http://codepen.io/rajeshwarpatlolla/pen/xGOwEv

<ion-side-menus>

    <ion-pane ion-side-menu-content>
      <ion-nav-bar type="bar-positive"
               back-button-type="button-icon"
               back-button-icon="ion-ios7-arrow-back"></ion-nav-bar>
      <ion-nav-view name="menuContent"></ion-nav-view>
    </ion-pane> 

    <ion-side-menu side="left">
      <header class="bar bar-header bar-assertive">
        <div class="title">Left Menu</div>
      </header>
      <ion-content has-header="true">
        <ul class="list">
          <a href="#/event/check-in" class="item">Check-in</a>
          <a href="#/event/attendees" class="item">Attendees</a>
        </ul>
      </ion-content>
    </ion-side-menu>

  </ion-side-menus>

Upvotes: 3

Views: 4623

Answers (1)

insertusernamehere
insertusernamehere

Reputation: 23580

You could overwrite the whole CSS rule:

.menu-animated {
    -webkit-transition: -webkit-transform 1500ms ease;
    -moz-transition: -moz-transform 1500ms ease;
    transition: transform 1500ms ease;
}

Or simply add:

.menu-animated {
    -webkit-transition-duration: 1500ms;
    -moz-transition-duration: 1500ms;
    transition-duration: 1500ms;
}

Demo

Upvotes: 8

Related Questions