Angular 2 : Re-using same animation for multiple elements

Question

有没有办法为不同的 DOM 元素使用相同的 css 动画？我已经创建了两次相同的动画，并且我正在寻找一种只编写一次并记下我想要淡入和淡出哪个 DOM 元素的方法。现在，我知道了 View Child 和 ElementRef，但我对实现有点不清楚。另外，由于 XSS 安全问题，我正在尝试寻找一种避免 ElementRef 的实现。 https://angular.io/docs/ts/latest/api/core/index/ElementRef-class.html

这是我的 HTML

<div>
    <md-checkbox (change)="toggleFadeOne()">Show</md-checkbox>
    <div fxLayout="row" [@fadeOne]="fadeOne" class="oneToggle">
        <p>

        </p>
    </div>
</div>

<div>
    <md-checkbox (change)="toggleFadeTwo()">Show</md-checkbox>
    <div fxLayout="row" [@fadeTwo]="fadeTwo" class="twoToggle">
    <p>

    </p>
</div>

这是我的CSS

.oneToggle, .twoToggle {//initial style for el, instead of void
   opacity: 0;
   visibility: hidden;
}

这是我的 typescript

@Component({
  selector : 'c-select-composite-config-dialog',
  templateUrl: './page.html',
  styleUrls: ['./style.css'],
  animations: [
  trigger('fadeOne', [
    state('in', style({
      'opacity' : '1', 'visibility' : 'visible'
    })),
    state('out', style({
      'opacity' : '0', 'visibility' : 'hidden'
    })),
    transition('* => *', animate(500))
  ]),
  trigger('fadeTwo', [
    state('in', style({
      'opacity' : '1', 'visibility' : 'visible'
    })),
    state('out', style({
      'opacity' : '0', 'visibility' : 'hidden'
    })),
    transition('* => *', animate(500))
  ])
]
})
export class MyComponent {



  private fadeOne : string;
  private fadeTwo : string;

  private toggleFadeOne() {
  if(this.fadeOne === 'out' || this.fadeOne === undefined) {
    this.fadeOne = 'in';
  } else {
    this.fadeOne = 'out'
  }
}

private toggleFadeTwo() {
  if(this.fadeTwo === 'out' || this.fadeTwo === undefined) {
    this.fadeTwo = 'in';
  } else {
    this.fadeTwo = 'out'
  }
}

...
}

Answer 1

我很确定您可以在其他地方定义动画，然后导入它并将其分配给您的动画属性。

像这样:

**import the animation classes**

export static class Animations {
    public sharedAnimation = trigger('fadeOne', [
    state('in', style({
      'opacity' : '1', 'visibility' : 'visible'
    })),
    state('out', style({
      'opacity' : '0', 'visibility' : 'hidden'
    })),
    transition('* => *', animate(500))
  ]),
  trigger('fadeTwo', [
    state('in', style({
      'opacity' : '1', 'visibility' : 'visible'
    })),
    state('out', style({
      'opacity' : '0', 'visibility' : 'hidden'
    })),
    transition('* => *', animate(500))
  ])
]
}

那么我认为你可以这样做:

animations: Animations.sharedAnimation