CODEWITHSUNDEEP
javascriptangularng-animate
User 5842
User 5842

Reputation: 3029

Angular Animate Fade-In, Fade-Out Component

I have the following code that I'd like to apply to a component when entering and leaving:

animations: [
    trigger('visibilityChanged', [
      state('in', style({opacity: 1})),
      transition('void => *', [
        style({opacity: 1}),
        animate(100)
      ]),
      transition('* => void', [
        animate(100, style({opacity: 0}))
      ])
    ])
  ]

This is nearly identical to the example that the Angular docs provide but for some reason, when going from the void => * state, there is no fade-in.

I've also tried this in there live examples page with no success.

Any ideas?

Upvotes: 0

Views: 7800

Answers (2)

David Ćeranić
David Ćeranić

Reputation: 154

I suggest you checkout ng-animate because it has lots of animations out of the box which are easily implemented, but if want code without library that fits your purpose then use this:

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

export const simpleFadeAnimation = trigger('simpleFadeAnimation', [

    // the "in" style determines the "resting" state of the element when it is visible.
    state('in', style({opacity: 1})),

    // fade in when created. this could also be written as transition('void => *')
    transition(':enter', [
      style({opacity: 0}),
      animate(1000 )
    ]),

    // fade out when destroyed. this could also be written as transition('void => *')
    transition(':leave',
      animate(1000, style({opacity: 0})))
]);

Or if you want to trasition by "X" axis, use this:

import { trigger, animate, transition, style, group, query } from '@angular/animations';

export const slideInAnimation = trigger('slideInAnimation', [
   // Transition between any two states
   transition('* <=> *', [
   // Events to apply
   // Defined style and animation function to apply
   // Config object with optional set to true to handle when element not yet added to the DOM
  query(':enter, :leave', style({ position: 'fixed', width: '100%', zIndex: 2 }), { optional: true }),
    // group block executes in parallel
    group([
      query(':enter', [
        style({ transform: 'translateX(100%)' }),
        animate('0.7s ease-out', style({ transform: 'translateX(0%)' }))
      ], { optional: true }),
      query(':leave', [
        style({ transform: 'translateX(0%)' }),
        animate('0.7s ease-out', style({ transform: 'translateX(-100%)' }))
       ], { optional: true })
    ])
  ])
]);

After that you need to import it inside @Component decorator in .ts file. And if you want to share it trough all components inside you app then use this:

<div [@slideInAnimation]="o.isActivated ? o.activatedRoute : ''">
    <router-outlet #o="outlet"></router-outlet>
</div>

Upvotes: 4

pondol
pondol

Reputation: 939

 animations: [
  trigger('visibilityChanged', [
    state('in', style({
      opacity: 0
    })),
    state('out',   style({
      opacity: 1
    })),
    transition('in => out', animate('100ms ease-in')),
    transition('out => in', animate('100ms ease-out'))
  ])
]

Upvotes: 1

Related Questions