Angular 4 路由变化动画

Question

我正在尝试在路线更改时制作简单的淡入淡出动画，但它不起作用。

我的动画文件是这样的：

export class RouterAnimations {
    static animate() {
        return trigger('routerTransition', [
            state('void', style({ opacity: 0 })),
            state('*', style({ opacity: 1 })),
            transition(':enter', [
                style({ opacity: 0 }),
                animate('0.4s ease')
            ]),
            transition(':leave', [
                style({ opacity: 1 }),
                animate('0.4s ease')
            ])
        ]);
    };
};

我的组件是这样的：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['../vitrine.component.css', './home.component.css'],
  animations: [RouterAnimations.animate()]
})
export class HomeComponent implements OnInit {
  @HostBinding('@routerTransition')
  public routerTransition = true;

  constructor() { }

  ngOnInit() {
  }
}

我观察到，如果我在状态上放置 position: fixed，它会起作用，但是当动画完成时，视图固定并且应用程序中的布局被破坏。

Answer 1

在 state('*',style({position: 'relative', opacity: 0 }))

上添加 position: 'relative'

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

export function fade() {
   return trigger('routerTransition', [ 
        state('void', style({position: 'fixed', opacity: 0 })), 
        state('*', style({position: 'relative', opacity: 0 })), 
        transition(':enter', [ style({opacity: 0}), animate('0.4s ease', style({opacity: 1})) ]), 
        transition(':leave', [ style({opacity: 1}), animate('0.4s ease', style({opacity: 0})) ])
   ]);
}

在你的组件中

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['../vitrine.component.css', './home.component.css'],
  animations: [fade()]
})
export class HomeComponent {

  @HostBinding('@routerTransition') routerTransition;
  // ...

}

Angular 4 路由变化动画

Angular 4 Routing Change Animation

angular2-routing

angular

angular-animations