Voici quelques titres possibles : 1. Comment faire fonctionner les transitions CSS avec `ngIf` dans Angular 2 ? 2. Pourquoi `ngIf` interrompt-il mes transitions CSS dans Angular 2 ? 3. Angular 2 : Combiner des animations `ngIf` et CSS pour une transmission fluide-tutoriel CSS-php.cn

Voici quelques titres possibles : 1. Comment faire fonctionner les transitions CSS avec `ngIf` dans Angular 2 ? 2. Pourquoi `ngIf` interrompt-il mes transitions CSS dans Angular 2 ? 3. Angular 2 : Combiner des animations `ngIf` et CSS pour une transmission fluide

Linda Hamilton

Libérer： 2024-10-26 22:14:29

original

886 Les gens l'ont consulté

以下是几种可能的标题：

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

Transitions/animations ngIf et CSS pour Angular 2

Comment faire glisser un div depuis la droite en utilisant CSS dans Angular 2 ?

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

Copier après la connexion

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

Copier après la connexion

Si vous utilisez simplement [ngClass] pour changer de classe et profiter de l'opacité, ce code fonctionne correctement. Mais je ne veux pas que cet élément soit rendu depuis le début, donc je le "cache" d'abord avec ngIf, mais la transition ne fonctionnera pas.

Mise à jour 4.1.0

Utilise l'API d'animation de transition, plus besoin d'utiliser [hidden] ou [*ngIf Hidden].

Mise à jour 2.1.0

Afficher l'animation sur angulaire.io

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

Copier après la connexion

Réponse originale

Lorsque l'expression devient fausse, *ngIf supprimera l'élément du DOM. Un élément inexistant ne peut pas faire l'objet d'une transition.

peut être remplacé par l'attribut caché :

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!