web-dev-qa-db-fra.com

Angular (4, 5, 6, 7) - Exemple simple d'animation coulissante vers l'extérieur sur ngIf

Quel est le minimum et la manière native de Angular4 de glisser dans et faire glisser un élément conteneur?

par exemple.

<div ngIf="show">
    <!-- Content -->
</div>

Slide In Content (de haut en bas, exactement comme jQuery . slideDown ()) lorsque affiche devient vrai .

Slide Out Content (de manière appropriée avec un effet de soulagement) lorsque show devient faux .

angulartypescriptangular-animations
27
abdul-wahab

D'abord un peu de code, puis l'explication. Les documents officiels décrivant ceci sont ici .

import { trigger, transition, animate, style } from '@angular/animations'

@Component({
  ...
  animations: [
    trigger('slideInOut', [
      transition(':enter', [
        style({transform: 'translateY(-100%)'}),
        animate('200ms ease-in', style({transform: 'translateY(0%)'}))
      ]),
      transition(':leave', [
        animate('200ms ease-in', style({transform: 'translateY(-100%)'}))
      ])
    ])
  ]
})

Dans votre modèle:

<div *ngIf="visible" [@slideInOut]>This element will slide up and down when the value of 'visible' changes from true to false and vice versa.</div>

J'ai trouvé le chemin angular un peu difficile à comprendre, mais une fois que vous le comprenez, il est assez facile et puissant.

Les animations font partie du langage humain:

  • Nous appelons cette animation 'slideInOut'.
  • Lorsque l'élément est ajouté (: enter), nous procédons comme suit:
  • -> Déplacer immédiatement l'élément 100% vers le haut (de lui-même), pour apparaître hors écran.

  • -> puis animez la valeur translateY jusqu'à atteindre 0%, où l'élément serait naturellement.

  • Lorsque l'élément est supprimé, animez la valeur translateY (actuellement 0) à -100% (hors écran).

La fonction d'accélération que nous utilisons est facile à utiliser. En 200 millisecondes, vous pouvez la modifier à votre guise.

J'espère que cela t'aides!

80
Hoff

J'ai répondu à une question très similaire, et voici une façon de le faire:

Commencez par créer un fichier dans lequel vous définissez vos animations et exportez-les. Juste pour le rendre plus clair dans votre app.component.ts

Dans l'exemple suivant, j'ai utilisé une hauteur maximale de la div allant de 0px (quand elle est cachée) à 500px, mais vous voudriez changer cela en fonction de vos besoins.

Cette animation utilise des états (in et out), qui seront basculés lorsque nous cliquons sur le bouton, ce qui lancera l’animation.

animations.ts 

import { trigger, state, style, transition,
    animate, group, query, stagger, keyframes
} from '@angular/animations';

export const SlideInOutAnimation = [
    trigger('slideInOut', [
        state('in', style({
            'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
        })),
        state('out', style({
            'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
        })),
        transition('in => out', [group([
            animate('400ms ease-in-out', style({
                'opacity': '0'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '0px'
            })),
            animate('700ms ease-in-out', style({
                'visibility': 'hidden'
            }))
        ]
        )]),
        transition('out => in', [group([
            animate('1ms ease-in-out', style({
                'visibility': 'visible'
            })),
            animate('600ms ease-in-out', style({
                'max-height': '500px'
            })),
            animate('800ms ease-in-out', style({
                'opacity': '1'
            }))
        ]
        )])
    ]),
]

Ensuite, dans votre app.component, nous importons l'animation et créons la méthode qui basculera l'état de l'animation.

app.component.ts 

import { SlideInOutAnimation } from './animations';

@Component({
  ...
  animations: [SlideInOutAnimation]
})
export class AppComponent  {
  animationState = 'in';

  ...

  toggleShowDiv(divName: string) {
    if (divName === 'divA') {
      console.log(this.animationState);
      this.animationState = this.animationState === 'out' ? 'in' : 'out';
      console.log(this.animationState);
    }
  }
}

Et voici comment votre app.component.html ressemblerait à ceci:

<div class="wrapper">
  <button (click)="toggleShowDiv('divA')">TOGGLE DIV</button>
  <div [@slideInOut]="animationState" style="height: 100px; background-color: red;">
  THIS DIV IS ANIMATED</div>
  <div class="content">THIS IS CONTENT DIV</div>
</div>

slideInOut fait référence au déclencheur d'animation défini dans animations.ts

Voici un exemple de StackBlitz que j'ai créé: https://angular-muvaqu.stackblitz.io/

Remarque secondaire: si une erreur se produit et vous demande d'ajouter BrowserAnimationsModule , importez-la simplement dans votre app.module.ts:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [ ..., BrowserAnimationsModule ],
  ...
})
23
br.julien

En fait, la quantité minimale de Angular à utiliser (comme indiqué dans la question initiale) consiste simplement à ajouter une classe à l'élément DOM lorsque la variable show est vraie et à effectuer l'animation/la transition via CSS. .

Donc, votre minimum Angular code est le suivant:

<div class="box-opener" (click)="show = !show">
    Open/close the box
</div>

<div class="box" [class.opened]="show">
    <!-- Content -->
</div>

Avec cette solution, vous devez créer des règles CSS pour la transition, comme suit:

.box {
    background-color: #FFCC55;
    max-height: 0px;
    overflow-y: hidden;
    transition: ease-in-out 400ms max-height;
}

.box.opened {
    max-height: 500px;
    transition: ease-in-out 600ms max-height;
}

Si vous avez des problèmes de compatibilité avec les versions antérieures du navigateur, n'oubliez pas d'ajouter les préfixes du fournisseur dans le fichier transitions.

Voir l'exemple ici

8
Ferie

L'animation:

animations: [
    trigger('openClose', [
        state('open', style({
            height: '*',
            opacity: '1'
        })),
        state('closed', style({
            height: '0px',
            opacity: '0'
        })),
        transition('open => closed', [
            animate('0.5s')
        ]),
        transition('closed => open', [
            animate('0.5s')
        ]),
    ]),
],

Le noeud à animer dans le modèle:

<whatever [@openClose]="show ? 'open' : 'closed'"></whatever>

Le bouton bascule dans le modèle:

<button (click)="toggleShow()">
    <span *ngIf="show; else hideNode">Hide</span>
    <ng-template #hideNode>Show</ng-template>
</button>

Le code du composant:

export class ShowHideComponent {
    show = false;

    toggleShow() {
        this.show = !this.show;
    }
}
0
dlporter98