Angular 4 :leave animation not triggering

Question

在我的项目中，我有以下内容:

slideInOut.ts

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

export const slideInOut = trigger('slideInOut', [
  state('*', style({
    transform: 'translateX(0)'
  })),

  // route 'enter' transition
  transition(':enter', [
    style({
      transform: 'translateX(100%)'
    }),
    animate('.3s ease-in-out', style({
      transform: 'translateX(0)'
    }))
  ]),

  // route 'leave' transition
  transition(':leave', [
    animate('.3s ease-in-out', style({
      transform: 'translateX(100%)'
    }))
  ])
]);

home.component.ts

import { Component } from '@angular/core';
import { slideInOut } from '../../animations/slideInOut';

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

home.component.html

<div @slideInOut>
  <button [routerLink]="['', { outlets: {'aux': null} }]">Test</button>
</div>

出于某种原因，离开动画没有触发。我的组件正确滑入，但没有滑出。它等待 .3s 然后消失。我尝试了多个 CSS 属性而不是 transform 并且发生了同样的事情。我还尝试用 * => * 和 * => void 替换 :leave 只是为了确定。有任何想法吗？谢谢!

Answer 1

你的 :leave 动画没有发生的原因是路由已经改变，你的“canvas”/component 也改变了。

:enter 触发动画是因为您的动画是在您的现在事件 route 定义的，并且当您访问它时，“ Canvas ”从一开始就在那里。

在我们的案例中，基本上您需要跳出框框思考 <router-outlet></router-outlet>

一种方法是将 router-outlet 包装在一个 div 容器中，该容器将进行动画处理，该动画的触发器将是路由更改，您可以在一堆方法。

首先，我向我们的路线添加了数据以区分它们:

const routes: Routes = [
  { path: 'home', component: HomeComponent, data: { state: 'home' }  },
  { path: 'about', component: AboutComponent, data: { state: 'about' } },
];

然后我们可以将 router-outlet 包装在 app.component.html 中像这样:

<main [@routerTransition]="getState(o)">
  <router-outlet #o="outlet"></router-outlet>
</main>

app.component.ts 中的getState() 方法|处理路由变化检测并触发动画:

getState(outlet) {
  // Changing the activatedRouteData.state triggers the animation
  return outlet.activatedRouteData.state;
}

最后，我们将动画简单地附加到应用程序组件的装饰器上:

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  animations: [
    trigger('routerTransition', [
      transition('* <=> *', [    
        query(':enter, :leave', style({ position: 'fixed', width:'100%' })),
        group([ 
          query(':enter', [
            style({ transform: 'translateX(100%)' }),
            animate('0.5s ease-in-out', style({ transform: 'translateX(0%)' }))
          ]),
          query(':leave', [
            style({ transform: 'translateX(0%)' }),
            animate('0.5s ease-in-out', style({ transform: 'translateX(-100%)' }))]),
        ])
      ])
    ])
   ],
})

您可以在此处查看实践:

StackBlitz Example