使用JS进行动画制作

Question

我在Asana上工作时遇到了这种动画，我试图在Angular 6项目中实现它，但是仍然不知道，我如何继续实现这种动画？

首先，步骤是用gif所示的不同颜色填充div。 到目前为止，这是我一直尝试的方法。

@Component({
  selector: '',
  templateUrl: '',
  styleUrls: [''],
  animations: [
    trigger('fadeInOut', [
      transition(':enter', [
        style({ opacity: 0 }),
        animate(700, style({ opacity: 1, background: ' linear-gradient(to bottom left, rgb(123, 98, 221), rgb(37, 77, 180))' }))
      ]),
      transition(':leave', [
        animate(1000, style({ opacity: 0 }))
      ])
    ])
  ]
})


  <div class="" [@fadeInOut] *ngIf = 'showFeedback'>
    <p>Create</p>
  </div>

目前这就是我的样子。

这是我要实现的目标。

Answer 1

我自己解决了这个问题。 这是相同的沙箱。

https://codesandbox.io/s/angular-c4kth

这是它的外观。

Answer 2

制作一个正常的进度条，并使用gif图片作为background-image，选中此小提琴https://jsfiddle.net/u2wvxo5c/14/