在有角度的选项卡之间平滑滑动

Question

如何实现角度选项卡之间的平滑滑动？

我正在使用 mat-tabs（角度材料选项卡），并希望添加对触摸设备（例如移动设备 WhatsApp 或 Telegram）的选项卡滑动支持。

我发现的资源为选项卡父元素（mat-tab-group）提供输入，selectedIndex并根据swipeleft和swiperight事件更新它。

我对这个解决方案的问题是，过渡是即时的并且不平滑，即使我添加一些自定义动画，滑动启动后也无法取消（在我上面提到的应用程序中可以。）

那么有没有一种方法可以使用 mat-tabs 来实现此目的，或者是否有一个不同的组件库可以用于此目的？

Answer 1

您可以添加animationDuration指令mat-tab-group，它将为选项卡之间的转换设置动画：

<mat-tab-group animationDuration="1000ms">
  <mat-tab label="First">Content 1</mat-tab>
  <mat-tab label="Second">Content 2</mat-tab>
  <mat-tab label="Third">Content 3</mat-tab>
</mat-tab-group>