DOM要素/スタイルの変更時に角度アニメーションを有効にする

Question

私はAngular Appで背景を変更するたびにフェードインアニメーションを作成しようとしていますが、そうする方法が見つからないようです。

これは、現時点で私が持っている（関連）コードです：

HTML：

<div @fadeIn [style.backgroundImage]="currentImage" id="home" class="pt-5"> 
    <div class="container"> 
    ... 
    </div> 
</div> 

はCSS：

#home { 
    background-image: url("/assets/img/friendship.jpeg"); 
    ... 
} 

TS：

私

@Component({ 
    selector: 'app-home', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.css'], 
    animations: [ 
    trigger('fadeIn', [ 
     transition(':enter, :leave', [ 
     style({ opacity: 0 }), 
     animate('2.5s ease-out') 
     ]) 
    ]) 
    ] 
}) 
export class HomeComponent implements OnInit { 

    private bgImgs: Array<any>; 
     private current: number = 0; 
     currentImage; 

     constructor(private sanitize: DomSanitizer) { 

     this.bgImgs = [ 
      ... 
     ]; 
     this.currentImage = this.bgImgs[0] 
     } 


     ngOnInit() { 
     Observable.interval(8669) 
      .subscribe(x => { 
      this.currentImage = this.sanitize.bypassSecurityTrustStyle(`url(${this.bgImgs[this.current]})`); 
      this.current == this.bgImgs.length - 1 ? (this.current = 0) : ++this.current; 
      }) 
     } 

基本的には配列を通してループされていた「assets」フォルダに保存されている画像の数が増え、背景が約1秒ごとに変わります。 Observableとの8s。

スタイルのアニメーション（フェードイン効果）は、最初にページに入ったときにのみ適用され、背景が変更されたときには適用されません。私は、バックグラウンドが私のやり方のように変更されたときに、ページの再レンダリングがないことを理解しています（したがって、アニメーションは適用されません）。しかし、私は解決策を考え出すことができませんでした。

これを読んでいただきありがとうございます。私はあなたの解決策を聞いて楽しみにしています！

Answer 1

角度アニメーション状態を使用してアニメーションをより簡単にトリガーする必要があります。したがって、背景が変わるたびに、状態を2回切り替えてフェードアウトし、再びフェードインします。

ここにはStackBlitz exampleが作成されています。

app.component.tsうまく機能

@Component({ 
    ... 
    animations: [ 
    trigger('fadeIn', [ 
     state('in', style({ 'opacity': '1' })), 
     state('out', style({ 'opacity': '0' })), 
     transition('* => *', [ 
     animate(2000) 
     ]) 
    ]) 
    ] 
}) 

export class AppComponent implements OnInit { 
    private bgImgs: Array<any>; 
    private current: number = 0; 
    currentImage; 
    state = 'in'; 
    counter = 0; 
    enableAnimation = false; 

    constructor(private sanitize: DomSanitizer) { 
    this.bgImgs = [...]; 
    this.currentImage = this.bgImgs[0] 
    } 


    ngOnInit() { 
    Observable.interval(8669) 
     .subscribe(x => { 
     this.runAnimation(); 
     }) 
    } 

    runAnimation() { 
    this.enableAnimation = true; 
    this.counter = 0; 
    this.toggleState(); 
    } 

    toggleImg() { 
    this.currentImage = this.sanitize.bypassSecurityTrustStyle(`url(${this.bgImgs[this.current]})`); 
    this.current == this.bgImgs.length - 1 ? (this.current = 0) : ++this.current; 
    } 

    onDone($event) { 
    if (this.enableAnimation) { 
     if (this.counter === 1) { 
     this.toggleImg(); 
     } 
     this.toggleState(); 
    } 
    } 

    toggleState() { 
    if (this.counter < 2) { 
     this.state = this.state === 'in' ? 'out' : 'in'; 
     this.counter++; 
    } 
    } 
} 

app.component.html

<div [@fadeIn]="state" (@fadeIn.done)="onDone($event)" [style.backgroundImage]="currentImage" id="home" class="pt-5"> 
    <div class="container"></div> 
</div>