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属性而不是转换，同样的事情发生了。我还尝试用:leave和* => *替换* => void以确定。有任何想法吗？谢谢！

Answer 1

你的：离开动画没有发生的原因是因为路线已经改变，所以“canvas”/ component也是如此。

：输入触发动画，因为您的动画是在现在有效的路线中定义的，当您访问它时，“画布”就是从头开始。

基本上你需要在我们的案例<router-outlet></router-outlet>

之外进行思考

你可以做的一种方法是将 router-outlet 包装在一个将被设置动画的div容器中，并且该动画的触发器将是路由更改，你可以在一堆道路。

首先，我已将数据添加到路线中以区分它们：

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

然后我们可以将{strong> 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;
}

最后，我们将动画简单地附加到app组件的装饰器上：

@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%)' }))]),
        ])
      ])
    ])
   ],
})

您可以在此处查看：

角度4：让动画不会触发

1 个答案:

StackBlitz Example