Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Linda Hamilton
Freigeben: 2024-10-26 22:14:29
Original
775 Leute haben es durchsucht

以下是几种可能的标题:

1. How to Make CSS Transitions Work with `ngIf` in Angular 2? 
2. Why Does `ngIf` Break My CSS Transitions in Angular 2?
3. Angular 2: Combining `ngIf` and CSS Animations for Smooth Transitions
4. Troubleshooting CSS Transitions and `ngIf` in

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>
Nach dem Login kopieren
.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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!