在svg動畫元素與Angular 4之間切換

我想在Angular 4組件中動畫svg。我如何在svg組件中獲取不同的ID並按順序對它們進行動畫處理？在svg動畫元素與Angular 4之間切換

我可以通過單擊事件觸發我的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(); 
    } 
}

部件的我的HTML部分是比較複雜的，因爲的我的SVG的複雜性，但我至今一個動畫元素：

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

來源

2017-08-02 Davtho1983

Josh Morony做了一個類似於Ionic here的Youtube視頻。 Ionic在封面上也使用Angular。它確實在他的視頻中使用了Sass。

在他的示例的svg元素中，他給類和@keyframes的每個子元素（如circle，rect，polygon和附加CSS動畫）提供了類。希望有所幫助..

來源

2017-08-02 18:25:39 JGFMK

@ Davtho1983你見過這篇文章嗎？ https://blog.thoughtram.io/angular/2017/07/26/a-web-animations-deep-dive-with-angular.html – JGFMK

我沒有謝謝！我看到他的一些其他人 - 我不知道爲什麼那個特別的人躲過了我 - 看起來它會幫助你！ – Davtho1983

在svg動畫元素與Angular 4之間切換

回答

相關問題