转换不适用于 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>

转换不适用于 angular5 动画

Transform not working on angular5 animations

animation

transform

angular

angular-animations

angular5