Angular 角度4：使动画不触发

在我的项目中，我有以下几点：

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

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.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%)'
    }))
  ])
]);

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属性而不是转换，同样的事情也发生了。我还尝试用

*=>*

和

*=>void

替换

：leave

。有什么想法吗？谢谢

您的：leave动画没有发生的原因是因为路线已更改，您的“canvas”/component也已更改

：enter触发器会设置动画，因为动画是在当前活动路线中定义的，当您访问它时，“画布”从一开始就在那里

基本上，在我们的案例中，您需要跳出框框思考

一种方法是将路由器出口包装在一个将被设置动画的div容器中，该动画的触发器将是路由更改，您可以通过多种方式侦听这些更改

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

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

然后，我们可以在

app.component.html

中包装路由器出口，如下所示：

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

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

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

@组件({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
动画：[
触发器（'routerTransition'[
转换（'**'，[
查询（':enter，：leave'，style（{position:'fixed'，width:'100%}）），
组（[
查询（“：输入”[
样式（{transform:'translateX（100%）'）），
设置动画（'0.5s轻松输入输出'，样式（{transform:'translateX（0%）'））
]),
查询（':leave'[
样式（{transform:'translateX（0%）'）），
动画（'0.5s缓进-缓出'，样式（{transform:'translateX（-100%）'））]，
])
])
])
],
})

您可以在此处查看实践：

---

有趣的是，这种方法不适用于子路由。你以前有过这样的经历吗？@OtaciliioOliveiralimaneto在意识到

：leave

动画不适合儿童之前，我的大脑被震碎了。将子路由转换为直接路径后，动画开始工作。如何将其与组件级动画结合起来？我正在尝试设置页面输入/输出的动画，这个问题由这个答案解决，但当尝试在组件级别设置输入/输出页面元素的动画时，没有任何动画效果，而是要重新创建这些类型的转换*wF-43O9NF_nakKNMGbguqg.gif