时间戳

首页 > 解决方案 > Angular - BrowserAnimationsModule 动画错误

angular - Angular - BrowserAnimationsModule 动画错误

问题描述

我正在尝试在有角度的页面之间创建淡出/淡入动画。

我用淡入淡出创建animations.ts

import {trigger,animate,transition,style,query} from "@angular/animations";

export const fadeAnimation = trigger("fadeAnimation", [
  transition("* => *", [
    query(":enter", [style({ opacity: 0 })], { optional: true }),
    query(
      ":leave",
      [style({ opacity: 1 }), animate("0.3s", style({ opacity: 0 }))],
      { optional: true }
    ),
    query(
      ":enter",
      [style({ opacity: 0 }), animate("0.3s", style({ opacity: 1 }))],
      { optional: true }
    )
  ])
]);

然后在 app.module 我导入 BrowserAnimationsModule

import { AdminModule } from './admin/admin.module';
import { AppRoutingModule } from './app-routing/app-routing.module';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserAnimationsModule,
    BrowserModule,
    AppRoutingModule,
    AdminModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

最后我添加了这个在路线中添加这个动画

<div class="wrapper">
  <app-admin-header></app-admin-header>
  <app-admin-left-side></app-admin-left-side>
  <main [@fadeAnimation]="o.isActivated ? o.activatedRoute : ''">
    <router-outlet #o="outlet"></router-outlet>
  </main>
  <app-admin-footer></app-admin-footer>
</div>

在 console.log 的最后一个组件中返回

找到合成属性@fadeAnimation。请包括“BrowserAnimationsModule”

我想我正确地导入了动画，所以我不知道错误在哪里。我使用 Angular 7。有人知道错误在哪里吗？

更新：没有作品

import { Component, OnInit } from '@angular/core';
import { fadeAnimation } from './../../../../app/animations.component';

@Component({
  selector   : 'app-usuariosform',
  templateUrl: './form.component.html',
  styleUrls  : ['./form.component.css'],
  animations : [fadeAnimation]
})

标签： angular

解决方案

您需要添加

animations: [ fadeAnimation ]

在您的 @Component ts 文件上。

推荐阅读