angular - 转换不适用于 angular5 动画

Question

我正在尝试使用 transform Angular 5 动画的属性，但它不起作用，我不知道为什么。我试过把关键帧放在里面，它也不起作用。只是不透明度起作用。

这是动画代码:

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

export const SlideOutAnimation =
    trigger('SlideOutAnimation', [
        // route 'enter' transition
        transition('* => *', [
            query(':enter',
                style({ opacity: 0, transform: "translateX(50px)" }),
                { optional: true }
            ),

            query(':enter', stagger(200, [
                style({ opacity: 0 ,transform: "translateX(50px)" }),

                animate('.8s ease-in-out', style({ opacity:1, transform: "translateX(0px)" }) )

            ]), { optional: true }),

            query(':leave',
                style({ opacity: 1 }),
                { optional: true }
            ),

            query(':leave', [
                style({ opacity: 1 }),
                animate('1s ease-in-out', style({ opacity: 0 }))],
                { optional: true }
            )

        ])
    ])

这是我使用动画的地方。

<div class="noticia-mae" [@SlideOutAnimation]= "listaNoticias.length" >
<a *ngFor="let noticia of listaNoticias" routerLink="/noticia/{{noticia.id}}">

<div class="card text-center noticia">

  <div class="card-body">
    <h5 class="card-title">{{noticia.titulo}}</h5>
    <p class="card-text">{{noticia.resumo}}</p>

  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Answer 1

你的动画是正确的。

试着把*ngFor在 <div> (而不是 <a> 标签)如下:

<div class="noticia-mae" [@SlideOutAnimation]= "listaNoticias.length" >
  <div *ngFor="let noticia of listaNoticias" class="card text-center noticia">
    <div class="card-body">
      <h5 class="card-title">{{noticia.titulo}}</h5>
      <p class="card-text">{{noticia.resumo}}</p>
    </div>
    <div class="card-footer text-muted">
    2 days ago
  </div>
</div>