Question

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

我创建带有淡入淡出的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”

我认为我正确导入了动画，所以我不知道错误在哪里。我使用Angular7。有人知道错误在哪里吗？

更新：无效

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]
})

Answer 1

您需要添加

animations: [ fadeAnimation ]

在您的@Component ts文件中。

Answer 2

请参阅此页面，https://angular.io/guide/animations

component.ts

@Component({
  selector: 'app-open-close',
  animations: [
    trigger('openClose', [
      // ...
      state('open', style({
        height: '200px',
        opacity: 1,
        backgroundColor: 'yellow'
      })),
      state('closed', style({
        height: '100px',
        opacity: 0.5,
        backgroundColor: 'green'
      })),
      transition('open => closed', [
        animate('1s')
      ]),
      transition('closed => open', [
        animate('0.5s')
      ]),
    ]),
  ],
  templateUrl: 'open-close.component.html',
  styleUrls: ['open-close.component.css']
})
export class OpenCloseComponent {
  isOpen = true;

  toggle() {
    this.isOpen = !this.isOpen;
  }

}

component.html

<div [@openClose]="isOpen ? 'open' : 'closed'" class="open-close-container">
  <p>The box is now {{ isOpen ? 'Open' : 'Closed' }}!</p>
</div>

Here，您可以看到代码审查。希望对您有所帮助。

Angular-BrowserAnimationsModule动画错误

2 个答案: