ngIf und CSS-Übergänge/Animationen in Angular 2

Wie schiebe ich ein Div von rechts mit CSS in Angular 2 ein?

  
 Notes

Toggle

.transition{
  -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ;
  -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out;
  margin-left: 1500px;
  width: 200px;
  opacity: 0;
}

.transition{
  opacity: 100;
  margin-left: 0;
}

Dieser Code funktioniert gut, wenn Sie nur [ngClass] zum Wechseln der Klassen verwenden und die Deckkraft nutzen. Ich möchte aber nicht, dass dieses Element von Anfang an gerendert wird, also „verstecke“ ich es zuerst mit ngIf, aber dann funktioniert der Übergang nicht.

Update 4.1.0

verwendet die Übergangsanimations-API, es muss nicht mehr [hidden] oder [*ngIf hide] verwendet werden.

Update 2.1.0

Animation auf angle.io anzeigen

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: `
    toggle show ({{show}})

    
xxx
  `
})
export class App {
  show:boolean = false;
}

Ursprüngliche Antwort

Wenn der Ausdruck falsch wird, entfernt *ngIf das Element aus dem DOM. Ein nicht vorhandenes Element kann nicht umgewandelt werden.

kann durch das versteckte Attribut ersetzt werden: