web-dev-qa-db-fra.com

Animation vers le bas Angular 4

J'essaie d'animer ma page mais j'ai le problème suivant:
J'ai une div de contenu sur ma page et un bouton qui ouvre une autre div au-dessus du contenu. J'aimerais que ce div se fane et glisse dedans, et le soufflet div glisse aussi vers le bas/haut. J'ai créé l'animation que je voulais pour la div ci-dessus qui s'ouvre au clic, mais je ne comprends pas quoi faire avec la div de contenu, exemple de code ci-dessous:

<div class="wrapper">
  <button (click)="animated = !animated"></button>
  <div *ngIf="animated" [@slideInOutAnimation] class="animated-div">
  THIS DIV IS ANIMATED</div>

  <div class="content">THIS IS CONTENT DIV</div>

</div>

TypeScript:
animations: [
trigger('slideInOutAnimation', [

  state('*', style({

  })),
  transition(':enter', [
    style({
      transform: 'translateY(-10%)',
      opacity: 0
    }),
    animate('.5s ease-in-out', style({
      transform: 'translateY(0)',
      opacity: 1
    }))
  ]),
  transition(':leave', [
    animate('.5s ease-in-out', style({
      transform: 'translateY(-10%)',
      opacity: 0
    }))
  ])
])
]

Dois-je créer un autre déclencheur qui déplacera ma div de contenu avec l'animation?

cssangularangular-animations
13
Nemanja Grabovac

Créez d'abord un fichier dans lequel vous définiriez vos animations et exportez-les. Juste pour être plus clair dans votre app.component.ts

Dans l'exemple suivant, j'ai utilisé une hauteur maximale de div qui va de 0 px (quand il est masqué) à 500 px, mais vous changeriez cela en fonction de vos besoins.

Cette animation utilise des états (entrants et sortants), qui seront basculés lorsque nous cliquons sur le bouton, qui exécutera 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 composant app.com, 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 à quoi ressemblerait votre app.component.html :

<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 StackBlitz que j'ai créé: https://stackblitz.com/edit/angular-muvaq

Note latérale: Si une erreur se produit et vous demande d'ajouter BrowserAnimationsModule, importez-le simplement dans votre app.module.ts:

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

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

Je préfère tout à fait l'opérateur générique lorsque vous travaillez avec des transitions de hauteur pour permettre un contenu de hauteur dynamique.

// Bind to true/false states via 0 and 1 values

trigger('slideUpDown', [
  state('0', style({ 'max-height': '*', opacity: 1 })),
  state('1', style({ 'max-height': '0px', opacity: 0 })),
  transition(':enter', animate('400ms ease-in-out')),
  transition('* => *', animate('400ms ease-in-out')),
])

usage:

<div #someDiv [@slideUpDown]="someDiv.state"></div>

ailleurs ou dans le modèle, vous pouvez basculer l'état.

<button (click)="someDiv.state = !someDiv.state"></button>
14
Mustafa Samar