Angular 2：为多个元素重复使用相同的动画

Question

有没有一种方法可以为不同的DOM元素使用相同的CSS动画？我已经创建了两个相同的动画，我正在寻找一种方法只写一次并注意我想要淡入和淡出哪个DOM元素。现在，我知道ViewChild和ElementRef，但我对实现还有点不清楚。此外，我正在尝试寻找一种避免ElementRef的实现，因为存在XSS安全问题。 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'
  }
}

...
}

- John Stafford

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

- chrispy

---

感谢您的回复@chrispy。是的，我熟悉在外部文件中定义动画，但是，同样的动画，要写两次吗？一定有办法将一个动画定位到不同的DOM元素。 - John Stafford

谢谢你的回复 :) - Tim Consolazio

@TimConsolazio，你是如何在ngClass中设置初始状态的？ - John Stafford

我只有一个淡入淡出动画，但我可以设置 [@fade]="fadeOne" 和 [@fade]="fadeTwo"。希望对某些人有所帮助。 - John Stafford

@JohnStafford 我不是很明白。我可以看看你的触发器定义吗？ 我正在尝试将相同的“触发器”动画应用于多个DOM元素。我遇到了你提到的同样的问题。我不想为视图中的每个DOM元素定义一个动画“触发器”。 - TerNovi