Angular 4、遷移とクエリでSVGをアニメーション化する

Question

コンポーネント内のSVGをAngularでアニメーション化したいのですが、アニメーションのステップを指定するのが難しいと感じています。

私は、次の手順アニメーション化する：円は不透明度0

2でオフスクリーン始まり）

1）円は、トップから画面に移動し、それが行くように、より不透明になり、不透明度が1に終了します

3）右に円を移動し、

オフスクリーン終わる私もそれがオフスクリーンを開始するために得ることはできませんが、私はまた、アニメーションがトリガされたときに制御することはできませんように見えます。ページが読み込まれてから1秒後にトリガーしたいと思います。

HTML：

<svg width="100" height="100"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
</svg> 

TS：

import { Component, OnInit, HostBinding } from '@angular/core'; 
import { style, animate, animation, animateChild, useAnimation, group, sequence, transition, state, trigger, query, stagger } from '@angular/animations'; 


@Component({ 
    selector: 'app-svg-viewer', 
    templateUrl: './svg-viewer.component.html', 
    styleUrls: ['./svg-viewer.component.css'], 

    animations: [ 
    trigger('myAwesomeAnimation', [ 

     transition(':enter', group([ 

     query('circle', stagger('0ms', [ 
      animate('200ms 250ms ease-in', style({ opacity: 0, transform: 'translateY(-400%)' })) 
     ])), 
     ])), 



    ]) 
    ], 

}) 


export class SvgViewerComponent implements OnInit { 

    @HostBinding('@myAwesomeAnimation') 
    public animateProfile = true; 

    constructor() { } 

    ngOnInit() { 
    } 

} 

私のdevの環境はapp.module.tsに以下の追加でビルド、標準角度-CLIです：

import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 

app.module.ts内の@NgModule内：

BrowserModule, 
BrowserAnimationsModule, 

Answer 1

あなたがリンクしているプラ​​ンカーは、他のアニメーションルールがブロックしています。マークアップ（？）を取り除いたように見えるので、失敗する非オプションのアニメーションを実行しようとしています。これらを削除してからこれを追加しました：

query('circle', style({transform: 'translateX(-200%)'})), 
    query('circle', group([ 
     animate('300ms cubic-bezier(0.68, 0, 0.68, 0.19)', style({ transform: 'translateX(0)' })) 
    ])), 

angle4のアニメーションは決してしませんでしたが、これはおそらく最適ではありません！

Plunker：https://plnkr.co/edit/pdFK4CQ4AJyBhyP7IoGq?p=preview

---

EDIT！

キーフレームを使用して上の1秒の遅延を入れて管理

：

animations: [ 
    trigger('profileAnimation', [ 
    transition(':enter', group([ 
     query('circle', style({transform: 'translateX(-200%)'})), 
     query('circle', group([ 
     animate('2000ms ease-in', keyframes([ 
      style({ transform: 'translateX(-200%)', offset: 0.5 }), 
      style({ transform: 'translateX(0)', offset: 0.75 }), 
      style({ transform: 'translateX(0)', offset: 0.95 }), 
      style({ transform: 'translateX(50%)', offset: 0.98 }), 
      style({ transform: 'translateX(0)', offset: 1 }), 
     ])) 
     ])), 
    ])) 
    ]) 
], 

私はまた、彼らはどのように動作するかビットをデモするために最後にいくつかの生意気なエキストラで追加。ハンディ。これは、2秒のアニメーションを実行します.1秒間は何もしないで、その後は1/2秒間回転させ、その後は何もしないで、愚かなブープを行います。

https://plnkr.co/edit/gspBK24mI1oWYmDX6t5E?p=preview