减慢IONIC中侧面菜单动画的速度

Raj*_*war 2 css ionic-framework ionic

当我们开始使用带有'sidemenu'选项的新离子项目并运行应用程序时,我们将能够在刷卡或单击菜单切换按钮时查看侧边菜单.

单击菜单按钮时动画效果很好.但我希望减慢侧面菜单的动画速度.因此,当我点击按钮时,侧面菜单会慢慢显示.

有没有办法覆盖默认的CSS或有没有办法自定义IONIC侧面菜单的动画速度?如果是这样,请帮助我.

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>
Run Code Online (Sandbox Code Playgroud)

ins*_*ere 7

您可以覆盖整个CSS规则:

.menu-animated {
    -webkit-transition: -webkit-transform 1500ms ease;
    -moz-transition: -moz-transform 1500ms ease;
    transition: transform 1500ms ease;
}
Run Code Online (Sandbox Code Playgroud)

或者只是添加:

.menu-animated {
    -webkit-transition-duration: 1500ms;
    -moz-transition-duration: 1500ms;
    transition-duration: 1500ms;
}
Run Code Online (Sandbox Code Playgroud)

演示