在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之间切换

回答

相关问题