Question

使用Angular 6，我有4个想要发生的过渡/步骤：

使用ng如果显示div 1（包含按钮），请向上滑动
“提交”按钮将从左到右改变颜色，这是一个计时器，用户可以单击10秒钟直到其自动单击，并将“已提交”布尔值设置为true
Div 1将滑出屏幕
Div 2将向上滑动（也使用ngIf）

我有执行转换的代码，但我想让它们等待执行下一个转换

使用交错是实现此目的的唯一合理方法吗？即-https://angular.io/api/animations/stagger

到目前为止，这是我在10秒钟内将按钮颜色从左更改为右，然后另一个将div上下滑动的方法

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  animations: [
    trigger('changeButtonColor', [
      state('initial', style({
        'background-position': 'right bottom'
      })),
      transition('initial=>final', animate('10000ms'))
    ]),
    trigger('showSubmitButtons', [
      transition(':enter', [
        style({transform: 'translateY(100%)'}),
        animate(1500, style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate(1500, style({transform: 'translateY(100%)'}))
      ])
    ]),
  ]
})

这是一个快速的html片段：

    <div class="actionButtons" *ngIf="!submitted" [@showSubmitButtons]>
            <button [@changeButtonColor]=currentState (@changeButtonColor.done)="submitImage()" id="submitBtn" class="submitButton" (click)="submitImage()"><i class="fas fa-check"></i></button>
            <button id="restartBtn" class="myButton" (click)="resetCapture()"><i class="fas fa-redo-alt"></i></button>
    </div>

    <div class="offlineContent" *ngIf="submitted" [@showSubmitButtons]>
        <h1>Thank You!</h1>
        <button id="restartBtn" class="myButton" (click)="resetCapture()"><i class="fas fa-redo-alt"></i></button>
    </div>

**编辑-我放了一个堆栈闪电弹，虽然不是很完美，但是至少可以看到我在单击“提交”按钮后特别需要等待的时间，想等这些按钮完全滑下来直到新的div滑动起来

我的闪电战没有显示出来（很难将代码从项目移到小样本中），但是我也希望我的“提交”按钮颜色过渡到div向上滑动为止

https://stackblitz.com/edit/angular-8xufpf

Angular 6-第一个完成时开始动画

0 个答案: