Question

有没有办法为不同的DOM元素使用相同的css动画？我已经创建了两次相同的动画，我正在寻找一种方法来只写一次，并记下我想要淡入和淡出的DOM元素。现在，我知道View Child和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'
  }
}

...
}

Answer 1

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

像这样：

**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

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

1 个答案: