转换不适用于 angular5 动画答案

【问题标题】：Transform not working on angular5 animations转换不适用于 angular5 动画
【发布时间】：2018-09-02 01:51:19
【问题描述】：

我正在尝试在 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>

【问题讨论】：

标签： angular animation transform angular5 angular-animations

【解决方案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>

【讨论】：