Angular 2 Ngif and CSS Transition/Animation

angular 2 ngIf and CSS transition/animation

update 4.1.0

Plunker

See also https://github.com/angular/angular/blob/master/CHANGELOG.md#400-rc1-2017-02-24

update 2.1.0

Plunker

For more details see Animations at angular.io

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

@Component({
  selector: 'my-app',
  animations: [
    trigger(
      'enterAnimation', [
        transition(':enter', [
          style({transform: 'translateX(100%)', opacity: 0}),
          animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
        ]),
        transition(':leave', [
          style({transform: 'translateX(0)', opacity: 1}),
          animate('500ms', style({transform: 'translateX(100%)', opacity: 0}))
        ])
      ]
    )
  ],
  template: `
    <button (click)="show = !show">toggle show ({{show}})</button>

    <div *ngIf="show" [@enterAnimation]>xxx</div>
  `
})
export class App {
  show:boolean = false;
}

original

*ngIf removes the element from the DOM when the expression becomes false. You can't have a transition on a non-existing element.

Use instead hidden:

<div class="note" [ngClass]="{'transition':show}" [hidden]="!show">

angular 6 animation *ngIf, transition not work

To get this to work you will need to remove the *ngIf="isMenuOpen" on the <ul>. Angular is unable to calculate the transition between the closed/open states as the element simply does not exist when isMenuOpen is false.

Here is a StackBlitz showing the animation in action with *ngIf removed.

Alternatively you can utilize entering/leaving states to use in conjunction with *ngIf. It would look like this:

trigger('animationOption2', [      
  transition(':enter', [
    style({ backgroundColor: 'yellow' }),
    animate(300)
  ]),
  transition(':leave', [
    animate(300, style({ backgroundColor: 'yellow' }))
  ]),
  state('*', style({ backgroundColor: 'green' })),
])

Here is a StackBlitz in action.

Chaining ngIf and animation transitions

Upon advice from a colleague, I wound up dropping the use of ngIf and instead used display, setting it to none in the hidden state and restoring it. Since that was entirely implementable with CSS, I could just use the built-in functionality in animations without doing anything quirky.

Similarly, because display can apparently be animated, the whole slide the other entity over to make room for the badge happens on its own, which was also a plus.

Angular: ngif animation jumps! How to animate ngif element after previous element is removed from DOM?

One possible solution for your problem is to use animation callback events in angular.

See official angular documentation here: AnimationEvent.

Stackblitz Sample: https://stackblitz.com/edit/angular-ivy-y5momt

Angular2 animate doesn't work with ngIf

It should work with this,

toggleState(){

    this.clientTable = true          //<<<===changed order.

    this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive'

}

If it doesn't work (workaround)

toggleState(){

    this.clientTable = true          //<<<===changed order.

    setTimout(()=>{
       this.testAnimate.state == 'inactive' ? this.testAnimate.state = 'active' : this.testAnimate.state = 'inactive'
    },2000)

}

css transition on opacity angular

You're using *ngIf on your snackbar component, that's why css transitions do not work.

Refer to this question in order to use angular BrowserAnimationsModule. There are also options for fade in / out effects when you're animating through BrowserAnimations Module.

---

Related Topics