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

Question

我想为 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()"> ...

Answer 1

Josh Morony 制作了一个与 Ionic here 类似的 Youtube 视频。 Ionic 也在幕后使用 Angular。它确实在他的视频中使用了 Sass。

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