angular - Sidemenu & Modals 的动画比自己的动画更快

Question

从底部滑出和滑入侧边菜单或向上滑动模态框(Ionic2 Modal)的动画非常快速和流畅。

现在我为 float 操作按钮定义了自己的动画。此动画比 ionic 动画慢得多。有什么区别？

为什么我的动画有点滞后？

animations: [
    trigger('heroState', [
      state('false', style({
        right: '-500px',
      })),
      state('true',   style({
        right: '0px',
      })),
      transition('false => true', animate('500ms ease-in')),
      transition('true => false', animate('500ms ease-out'))
    ])
  ],

Answer 1

@rakete:我认为 ionic 使用不同的立方贝塞尔曲线来控制模态动画的速度。你能试试下面这些吗？

transition('false => true', animate('500ms cubic-bezier(0.65, 0.05, 0.36, 1)')

和

transition('false => true', animate('500ms cubic-bezier(0.36, 0.66, 0.04, 1)')

阅读更多:Cubic Bezier
代码笔:cubic-bezier(0.36, 0.66, 0.04, 1)