Hier ein paar mögliche Titel: 1. Wie funktionieren CSS-Übergänge mit „ngIf' in Angular 2? 2. Warum unterbricht „ngIf' meine CSS-Übergänge in Angular 2? 3. Angular 2: Kombination von „ngIf'- und CSS-Animationen für reibungslose Trans

ngIf und CSS-Übergänge/Animationen für Angular 2

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

<code class="html"><div class="note" [ngClass]="{'transition':show}" *ngIf="show">
  <p> Notes</p>
</div>
<button class="btn btn-default" (click)="toggle(show)">Toggle</button></code>

.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;
}

Wenn Sie nur [ngClass] zum Wechseln der Klassen verwenden und die Deckkraft nutzen, funktioniert dieser Code einwandfrei. 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 ist nicht mehr erforderlich, [hidden] oder [*ngIf hide] zu verwenden.

Aktualisiert 2.1.0

Animation auf angle.io ansehen

<code class="typescript">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;
}</code>

Originalantwort

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:

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

Das obige ist der detaillierte Inhalt vonHier ein paar mögliche Titel: 1. Wie funktionieren CSS-Übergänge mit „ngIf' in Angular 2? 2. Warum unterbricht „ngIf' meine CSS-Übergänge in Angular 2? 3. Angular 2: Kombination von „ngIf'- und CSS-Animationen für reibungslose Trans. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!