如何进行幻灯片过渡？

Question

我想创建一个滑动的背景，就像您在此站点上看到的：https://chucklefish.org/。我遇到的问题是（1）当页面首次加载时，背景将是第一个背景过渡时的空白。我应该如何设置背景？ （2）在背景滑入时应该有空白。如何获取背景，以便当当前背景滑出时下一个背景已经滑入？

HTML

<div id = content>
  <ng-container *ngFor = "let i of [0,1,2]">
  <div id = slider [@flyInOut] *ngIf = "i == gameIndex " [ngStyle] = "{'background':game}">

  </div>

</ng-container>

打字稿

import { Component, HostBinding, OnInit } from '@angular/core';
import {
  trigger,
  state,
  style,
  animate,
  transition,
  // ...
} from '@angular/animations';
import { interval } from 'rxjs'
@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
  animations: [
    trigger('flyInOut', [
      state('in',
      style({ transform: 'translateX(0)' })),
      transition(':enter', [
        style({ transform: 'translateX(-100%)' }),
        animate('0.5s ease-out')
      ]),
      transition(':leave', [
        animate('0.5s ease-out', style({ transform: 'translateX(100%)' }))
      ])
    ])
  ]
})
export class HomeComponent implements OnInit {
  game:string;
  gameIndex:number;
  games:string[];
  loading:boolean;
  constructor() { 

    this.gameIndex = 0;
    this.games = ['url(../assets/images/game1.jpg)','url(../assets/images/game2.png)','url(../assets/images/game3.jpg)'];
    this.game = this.games[this.gameIndex];


  }

  ngOnInit() {
    interval(3000).subscribe(() => {

      this.gameIndex = (this.gameIndex + 1) % this.games.length;
      this.game = this.games[this.gameIndex];
    })
  }



}