使用Angular 4在svg的动画元素之间切换

我想在Angular 4组件中设置svg的动画。如何在svg组件中获取不同的ID并按顺序设置它们的动画

我可以通过单击事件在svg的单个元素上触发单个动画，但是如何在页面加载时触发该动画呢

我有以下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();
  }
}

由于svg的复杂性，组件的html部分更加复杂，但到目前为止，我只有一个动画元素：

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

。。。

乔什·莫罗尼在Youtube上制作了一段与爱奥尼亚类似的视频。爱奥尼亚在封面下也使用棱角。它确实在他的视频中使用了Sass

---

在他的示例中的svg元素中，他为每个子元素（如圆形、矩形、多边形和多边形）提供类，并将CSS动画附加到类和@keyframes。希望对你有所帮助。

@Davtho1983你看过这篇文章吗？我没有，谢谢！我看到了他的一些其他人-我不知道为什么那个特别的一个躲过了我-看起来它将帮助tho！