angular里面使用TweenMax与flex-layout

第一步

cnpm install gsap @types/greensock --save
cnpm install @angular/flex-layout --save

第二步

引入

import { TweenMax,Cubic } from 'gsap';

app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';
// other imports 
@NgModule({
  imports: [FlexLayoutModule],
  ...
})

demo

cardss.component.html

<svg style="width:150px; height:300px" viewBox="0 0 250 250">
  <polygon class="left" #left points="125,30 125,30 125,30 31.9,63.2 46.1,186.3 125,230 125,230 125,230 203.9,186.3 218.1,63.2" />
  <polygon class="right" #right points="125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 203.9,186.3 218.1,63.2 125,30" />
  <path class="a"  d="M125,52.1L66.8,182.6h0h21.7h0l11.7-29.2h49.4l11.7,29.2h0h21.7h0L125,52.1L125,52.1L125,52.1L125,52.1
    L125,52.1z M142,135.4H108l17-40.9L142,135.4z"/>
</svg>

cardss.component.scss

svg{
  display:block;
  max-width:300px;
  margin:0 auto; }

.left, .shield{
  fill:#DD0031; }

.right{
  fill:#C3002F; }

.a{
  fill:#FFFFFF; }

cardss.component.ts

import { Component,OnInit,ViewChild,ElementRef } from '@angular/core';
import { TweenMax,Cubic } from 'gsap';
@Component({
    selector   : 'fuse-cards-docss',
    templateUrl: './cardss.component.html',
    styleUrls  : ['./cardss.component.scss']
})
export class FuseCardssDocsComponent implements OnInit
{

    constructor()
    {

    }

  @ViewChild('left') left: ElementRef;
  @ViewChild('right') right: ElementRef;

  ngOnInit() {
    TweenMax.to(this.left.nativeElement, 1, {
      attr: {
        points: '125,30 125,30 125,30 31.9,30 31.9,230 125,230 125,230 125,230 203.9,186.3 218.1,63.2'
      },
      repeat: -1,
      yoyo: true,
      ease: Cubic.easeInOut
    });
    TweenMax.to(this.right.nativeElement, 1, {
      attr: {
        points: '125,30 125,52.2 125,52.1 125,153.4 125,153.4 125,230 125,230 218.1,230 218.1,30 125,30'
      },
      repeat: -1,
      yoyo: true,
      ease: Cubic.easeInOut
    });
  }
}