时间戳

首页 > 解决方案 > 导出的动画未定义

angular - 导出的动画未定义

问题描述

我在我的角度组件中使用淡入淡出动画。如果我在下定义组件装饰器内的动画animations: []，它工作正常。但是，我想在不同的组件中重用动画，因此我将它移动到另一个文件并从那里导出。当我使用这个动画时，它给出了我的undefined错误。我分析了它，它fadeInAnimation是未定义的。这是我的代码：

淡入动画.ts

import { trigger, animate, transition, style } from '@angular/animations';
export const fadeInAnimation = trigger('fadeInAnimation', [
    transition(':enter', [
        // styles at start of transition
        style({ opacity: 0 }),

        // animation and styles at end of transition
        animate('.3s', style({ opacity: 1 }))
    ]),
]);

我在我的组件中导入这个动画，如下所示：

import { fadeInAnimation } from './animations/fade-in.animation';
// Other imports
@Component({
    selector: 'app-some-component',
    templateUrl: './some.component.html',
    styleUrls: ['./some.component.scss'],
    animations: [ fadeInAnimation ]
})

..并在我的组件模板中使用它，如下所示：

<div [@fadeInAnimation]>Some content</div>

我无法理解为什么当我在组件内定义它时这个动画有效，而当我从另一个文件中导出它时它不起作用。我错过了什么？

有人将此设置为此问题的副本。我已经完成了其他答案中给出的所有事情，但问题仍未解决。另一个问题与创建单独的动画文件有关，我已经在这样做了。

标签： angulartypescriptangular-animations

解决方案

推荐阅读