角度4のsvgのアニメーション要素を切り替える

Question

角度4のコンポーネントでsvgをアニメートしたいと思います。 svgコンポーネント内で異なるIDを取得し、順次アニメーション化するにはどうすればよいですか？

クリックイベントで私のSVGの1つの要素で1つのアニメーションをトリガーすることはできますが、これをどのようにページロードでトリガーしますか？

私は、次のcomponent.tsコードを持っている：コンポーネントの

import { Component, OnInit } from '@angular/core'; 
import { DataService } from '../data.service'; 
import { trigger, state, style, transition, animate, keyframes } from '@angular/animations'; 

@Component({ 
    selector: 'app-splash', 
    templateUrl: './splash.component.html', 
    styleUrls: ['./splash.component.css'], 

    animations: [ 
    trigger('myAwesomeAnimation', [ 

     state('offscreen', style({ 
     transform: 'translateY(-50px)', 
     })), 

     state('onscreen', style({ 
     transform: 'translateY(50px)', 
     })), 

     transition('offscreen => onscreen', animate('500ms 500ms ease-in')), 

    ]), 
    ] 

}) 

export class SplashComponent implements OnInit { 

    state: string = 'offscreen'; 

    animateMe() { 
    this.state = (this.state === 'offscreen' ? 'onscreen' : 'offscreen'); 
    } 

    constructor(private dataService:DataService) { 

    } 

    someProperty:string = ''; 

    ngOnInit() { 
    console.log(this.dataService.cars); 
    this.someProperty = this.dataService.myData(); 
    } 
} 

私のHTML部分があるため、私のSVGの複雑さのため、より複雑ですが、私はちょうど今のところ1つのアニメーションの要素を持っている：

<g id="IsEverything" [@myAwesomeAnimation]='state'(click)="animateMe()"> ... 

Answer 1

ジョシュ・モロニーは、Ionic hereと同様のもののYoutubeビデオを作成しました。イオンはカバーの下にも角度を使用します。彼はビデオでSassを使用しています。

彼の例のsvg要素の中で、彼はクラス、および@keyframesにcircle、rect、polygon、および添付されたCSSアニメーションのような各サブ要素にクラスを与えました。希望が助けます..