用于淡入和淡出视图的 Angular 4 动画

Posted 2023-03-06

【中文标题】用于淡入和淡出视图的 Angular 4 动画

【英文标题】：Angular 4 animation for fade in and out a view

【发布时间】：2018-03-06 14:56:16

【问题描述】：

我只想让视图在路线更改时淡入淡出。我已经正确设置了组件，但我认为需要正确设置动画语法。

这是我目前的动画尝试。 我将此动画导入到我的组件中：

import trigger, state, animate, style, transition from '@angular/animations';

export function routerTransition() 
  return fadeInAndOut();


function fadeInAndOut() 
  return trigger('routerTransition', [
    transition(':enter', [
      style(opacity: 0),
      animate(3000, style(opacity: 1))
    ]),
    transition(':leave', [
      animate(3000, style(opacity: 0))
    ])
  ]);

这是我导入过渡的组件之一：

import  Component  from "@angular/core";
import  routerTransition  from "../../animations/fade.animation";

@Component(
  selector: "about-users",
  templateUrl: "./about.component.html",
  animations: [routerTransition()],
  host:  '[@routerTransition]': ''  
)

export class AboutComponent   
  constructor() 
  

【参考方案1】：

这对我来说适用于路由动画：

打字稿：

  ....
   animations: [
    trigger('routerTransition', [
      transition('* <=> *', [    
        query(':enter, :leave', style( position: 'fixed', opacity: 1 )),
        group([ 
          query(':enter', [
            style( opacity:0 ),
            animate('1000ms ease-in-out', style( opacity:1 ))
          ]),
          query(':leave', [
            style( opacity:1 ),
            animate('1000ms ease-in-out', style( opacity:0 ))]),
        ])
      ])
    ])
   ]

HTML：

<nav>
  <a routerLink="/page1" routerLinkActive="active">Page1</a>
  <a routerLink="/page2" routerLinkActive="active">Page2</a>
</nav>
<br><br>
<main [@routerTransition]="page.activatedRouteData.state">
  <router-outlet #page="outlet"></router-outlet>
</main>

DEMO

【讨论】：

我已经尝试过了，没有发生转换，也没有收到任何控制台错误。你能告诉我你的组件吗？

【参考方案2】：

我发现您需要将显示设置为阻止动画才能工作，如下所示：

@HostBinding('style.display') display = 'block';

此外，对于最新的 Angular，您需要使用 HostBinding 而不是 host。

请查看我的完整文件：

import  Component, OnInit, HostBinding  from '@angular/core';
import  slideInDownAnimation, fadeInAnimation  from './../checkout-animations';

@Component(
  selector: 'app-checkout-two',
  templateUrl: './checkout-two.component.html',
  styleUrls: ['./checkout-two.component.scss', './../checkout.component.scss'],
  animations: [slideInDownAnimation]
)

export class CheckoutTwoComponent implements OnInit 
  @HostBinding('@routeAnimation') routeAnimation = true;
  @HostBinding('style.display') display = 'block';

  constructor()  

  ngOnInit()