试试这个

NPM install @angular/animations@latest

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

这对我很有用。

在安装动画模块之后，你可以在app文件夹中创建一个动画文件。

router.animation.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
    export function routerTransition() {
        return slideToTop();
    }

    export function slideToRight() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(100%)' }))
            ])
        ]);
    }

    export function slideToLeft() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateX(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateX(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))
            ])
        ]);
    }

    export function slideToBottom() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(-100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(100%)' }))
            ])
        ]);
    }

    export function slideToTop() {
        return trigger('routerTransition', [
            state('void', style({})),
            state('*', style({})),
            transition(':enter', [
                style({ transform: 'translateY(100%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(0%)' }))
            ]),
            transition(':leave', [
                style({ transform: 'translateY(0%)' }),
                animate('0.5s ease-in-out', style({ transform: 'translateY(-100%)' }))
            ])
        ]);
    }

然后你导入这个动画文件到你的任何组件。

在你的组件中。ts文件

import { routerTransition } from '../../router.animations';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.scss'],
  animations: [routerTransition()]
})

不要忘记在app.module.ts中导入动画

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

试试这个

NPM install @angular/animations@latest

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

这对我很有用。

我得到以下错误:

Found the synthetic property @collapse. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

我遵循Ploppy接受的答案，它解决了我的问题。

以下是步骤:

1.
    import { trigger, state, style, transition, animate } from '@angular/animations';
    Or 
    import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

2. Define the same in the import array in the root module.

它将解决错误。编码快乐! !

此错误消息通常具有误导性。

你可能忘记了导入BrowserAnimationsModule。但那不是我的问题。我在根AppModule中导入BrowserAnimationsModule，就像每个人都应该做的那样。

问题与模块完全无关。我在组件模板中动画一个*ngIf，但我忘记在@Component中提到它。组件类的动画。

@Component({
  selector: '...',
  templateUrl: './...',
  animations: [myNgIfAnimation] // <-- Don't forget!
})

如果你在模板中使用一个动画，你也必须在组件的动画元数据中列出该动画…每一次。

简单地加上.. import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

协和进口:( … BrowserAnimationsModule

],

在app.module.ts文件中。

确保您已经安装。NPM install @angular/animations@latest