angular 2 ngIf and CSS transition/animation

by

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

More Related Contents:

  1. In RC.1 some styles can’t be added using binding syntax
  2. How to style child components from parent component’s CSS file?
  3. How and where to use ::ng-deep?
  4. Angular-cli from css to scss
  5. How to overwrite angular 2 material styles?
  6. Dynamic styleUrls in angular 2?
  7. The use of /deep/ and >>> in Angular 2
  8. Styling mat-select in Angular Material
  9. Angular dynamic background images
  10. Angular 2: How to style host element of the component?
  11. CSS file blocked: MIME type mismatch (X-Content-Type-Options: nosniff)
  12. Change style of pseudo elements in angular2
  13. Changing border color in mat-form-field
  14. Grid Styling – Overwrite style of ag-grid
  15. Dynamically updating css in Angular 2
  16. How to create one vertical column in between rows in Flexbox [closed]
  17. How can i make this wave effect on both bottom and top
  18. Why is a flex item limited to parent size?
  19. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  20. Internet Explorer’s CSS rules limits
  21. Pure CSS checkbox image replacement
  22. CSS: Set a background color which is 50% of the width of the window
  23. Does element width include padding?
  24. Cols, colgroups and css “:hover” pseudoclass
  25. Why does the linear-gradient disappear when I make an element position:absolute?
  26. Usage of display property of flex box items
  27. How can I prevent CSS gradient banding?
  28. How to display and hide a div with CSS?
  29. Can I define a class name on paragraph using Markdown?
  30. Check scrolling with CSS

Leave a Comment