Question

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

淡入in.animation.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>

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

有人将此设为this question的副本。我完成了其他答案中给出的所有内容，但问题仍然没有得到解决。另一个问题与创建单独的动画文件有关，我已经在做了。

导出的动画未定义

0 个答案: