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元素中，他为每个子元素提供了类，如circle，rect，polygon和附加的CSS动画到类和@keyframes。希望有所帮助..

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

1 个答案: