角度-如何仅添加一次全局动画触发器

时间:2019-11-18 18:53:31

标签: angular angular-animations

我的大多数组件中都有相同的动画触发器。

是否可以为整个应用程序全局或特定功能模块仅一次导入一组触发器?

export const FADE_ANIMATION = [
    trigger('fade', [
        transition(':enter', [style({ opacity: 0 }), animate(200)]),
        transition(':leave', animate(200, style({ opacity: 0 }))),
    ]),
    trigger('fadeIn', [transition(':enter', [style({ opacity: 0 }), animate(200)])]),
    trigger('fadeInListItem', [transition(':enter', [style({ opacity: 0 }), animate(100)])]),
    trigger('fadeInList', [transition(':enter', [query('@fadeInListItem', stagger(50, animateChild()), { optional: true })])]),
];

@Component({
    selector: 'some-app-cmp',
    templateUrl: './some-app-cmp.component.html',
    styleUrls: ['./some-app-cmp.component.css'],
    animations: [...FADE_ANIMATION],
})

docs官方只告诉您可以导入预定义的动画,就像我已经在做的那样。

1 个答案:

答案 0 :(得分:0)

我认为没有办法。我认为可以通过APP_BOOTSTRAP_LISTENER实现此操作(因为它要求创建的每个组件),但到目前为止没有成功。