CODEWITHSUNDEEP
angularanimationtransformangular5angular-animations
Jefferson Costa
Jefferson Costa

Reputation: 117

Transform not working on angular5 animations

I'm trying to use the transform property on the Angular 5 animations, but it doesn't work and I don't know why. I've tried to put inside keyframe, it didnt work too. Just the opacity is working.

This is the animation code:

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 }
            )

        ])
    ])

This is where I'm using the animation.

<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>

Upvotes: 4

Views: 5412

Answers (1)

br.julien
br.julien

Reputation: 3460

Your animation is correct.

Try to put the *ngFor on the <div> (and not the <a> tag) as follow :

<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>

Upvotes: 1

Related Questions