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

【问题标题】：Angular 2: Re-using same animation for multiple elementsAngular 2：为多个元素重复使用相同的动画
【发布时间】：2017-02-24 05:15:01
【问题描述】：

有没有办法为不同的 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;
}

这是我的打字稿

@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'
  }
}

...
}

【问题讨论】：

标签： angular css-animations

【解决方案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。是的，我熟悉在外部文件中定义动画，但同样的动画，写了两次？必须有某种方法可以将一个动画定位到不同的 DOM 元素。
我刚刚找到了这个。 stackoverflow.com/questions/42068914/… ;这可能会做到。
使用 ngClass 解决方案，并将动画作为关键帧保存在外部 css 中。动画状态可以保持与我在这里所做的大致相同，并使用绑定到复选框或其他东西的功能来切换状态。
我确信有多种方法可以给猫换皮，但是使用 ngClass 提供了一种可扩展的方法，可以让多个元素通过外部 css 中的关键帧访问动画，而无需访问 DOM。
谢谢你:)