变换不工作angular5动画

Question

我正在尝试在Angular 5动画上使用transform属性，但它不起作用，我不知道为什么。我试图放入关键帧，它也没有工作。只是不透明度正在发挥作用。

这是动画代码：

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>