Angular 8 动画像旋转木马一样左右滑动

我在创建一种带有 Angular 动画的轮播时遇到了问题。它适用于具有不同步骤的注册表单。当你进入下一步时,它必须从右边滑动,当你返回时,它从左边滑动。

我没有设法创建一个 plnkr 示例,无法导入 Angular 动画,抱歉。

这是一个基本代码,可让您了解我在寻找什么:

animations: [
trigger('slideRight', [
  state('in', style({ transform: 'translateX(0%)' })),
  state('out', style({ transform: 'translateX(+100%)' })),
  transition('in <=> out', animate('200ms ease-in')),
  transition('out <=> in', animate('200ms ease-in-out'))
]),
trigger('slideLeft', [
  state('in', style({ transform: 'translateX(0%)' })),
  state('out', style({ transform: 'translateX(-100%)' })),
  transition('in <=> out', animate('200ms ease-in')),
  transition('out <=> in', animate('200ms ease-in-out'))
])
]

signingUpStep: 0;

<div>
  <div [hidden]="signingUpStep != 0" [@slideLeft]="signingUpStep == 0 ? 'in' : 'out'">
    <div>Step 0</div>
  </div>
  <div [hidden]="signingUpStep != 1" [@slideRight]="signingUpStep == 1 ? 'in' : 'out'">
    <div>Step 1</div>
  </div>
  <div [hidden]="signingUpStep != 2" [@slideRight]="signingUpStep == 2 ? 'in' : 'out'">
    <div>Step 2</div>
  </div>
</div>

我的问题是:

<div [hidden]="signingUpStep != 1" [@slideRight]="signingUpStep == 1 ? 'in' : 'out'">
    <div>Step 1</div>
</div>

它总是使用 [@slideRight] 动画,而我希望它在用户来自 signingUpStep == 0 时确实使用 [@slideRight],但当用户来自 signingUpStep == 2 时使用 [@slideLeft]。

就像中间的 div signingUpStep == 1 在轮播中间一样。

我读过 :increment 和 :decrement 但我不确定如何使用它们。

我也尝试使用参数,但它不像我想要的那样工作。我需要能够根据幻灯片中的用户位置动态更改参数。

谢谢你。

stack overflow Angular 8 animation slide left and right like carousel
原文答案

答案:

作者头像

我有一个类似的问题,并设法使用一个参数仅使用一个动画触发器来做到这一点:

 trigger('slideInOut', [
  transition(':enter', [
    style({ transform: 'translateX({{direction}}%)' }),
    animate('400ms ease-in', style({ transform: 'translateX(0%)' })),
  ]),
])

在模板上(它是一个数据轮播,所以我将导航方向从右到左更改为从左到右):

 <div class="envolvido"
 *ngFor="let envolvido of itensPaginaAtual; index as indexOfelement"
 [@slideInOut]="{ value: '', 
 params: { direction: this.direction === 'RL' ? '100' : '-100' } }"
>
作者头像

您可以在转换 Angular Docs 中使用 Angular :increment 和 :decrement

类似的实现 - https://sabin-angular-image-carousel.stackblitz.io

希望能帮助到你。