web-dev-qa-db-fra.com

Angular 2 - La transition entre l'animation ne fonctionne pas

J'ai besoin d'une transition entre 2 couleurs OnClick. En ce moment, c'est mon code:

TypeScript 

animations: [
    trigger('menubarState', [
        state('false', style({backgroundColor:'#43a047'})),
        state('true', style({backgroundColor:'#333'})),
        transition('false => true', animate('1s')),
        transition('true => false', animate('1s'))
    ])
]

...

export class MenubarComponent {
  menuActive: boolean = false;
  onMenuClick () {
    if (this.menuActive == false) {
      this.menuActive = true;
    } else {
      this.menuActive = false;
    }
  }
}

HTML

<li [@menubarState]="menuActive" (click)="onMenuClick()">
      <a><span class="material-icons icon">apps</span></a>
</li>

Cela change le background-color comme il se doit. Le changement, cependant, est instantané au lieu d'une transition.

J'utilise Chrome, la dernière version.

htmlangulartypescriptangular2-animation
7
FlorisdG

Cela m’a longuement mordue et ce qui a été corrigé a été de changer ma variable d’état d’un type booléen à un type chaîne. Donc, au lieu de suivre true et false, suivez 'true' et 'false'. Les documents de Per Angular:

Un état d'animation est une valeur de chaîne que vous définissez dans votre code d'application.

Changez votre classe MenubarComponent en ceci:

export class MenubarComponent {
  menuActive: string = 'false';
  onMenuClick () {
    if (this.menuActive === 'false') {
      this.menuActive = 'true';
    } else {
      this.menuActive = 'false';
    }
  }
}

Je pense que c'est bête. Les booléens sont évidemment de bonnes options pour les états binaires.

Plus d'infos: https://angular.io/guide/animations#states-and-transitions

9
Aaron Krauss

Développant la réponse fournie par Aaron Krauss. C'est avoir des problèmes avec l'interprétation directe des valeurs vrai/faux; Toutefois, si vous préférez ne pas référencer un contexte de chaîne, vous pouvez remplacer true et false dans ce qui précède par les nombres 1 (true) et 0 (false). Cela a permis de résoudre mon problème et ne nécessitait aucune interprétation de chaîne agaçante.

trigger('menubarState', [
    state('0', style({backgroundColor:'#43a047'})),
    state('1', style({backgroundColor:'#333'})),
    transition('0 => 1', animate('1s')),
    transition('1 => 0', animate('1s'))
])
3
I. Buchan

Développant encore plus la réponse d'Aaron Krauss: Je ne veux pas transformer mes booléens en chaînes, alors j'ai défini un getter:

public menuActive: boolean = false;

get menuState() {
  return this.menuActive ? 'active' : 'inactive'
}

Et puis dans votre définition d'animation (j'ai fusionné les transitions car elles sont les mêmes):

animations: [
  trigger('menubarState', [
    state('inactive', style({backgroundColor:'#43a047'})),
    state('active', style({backgroundColor:'#333'})),
    transition('inactive <=> active', animate('1s'))
  ])
]

Et pour être complet, le modèle:

<li [@menubarState]="menuState" (click)="onMenuClick()">
  <a><span class="material-icons icon">apps</span></a>
</li>
1
Hetty de Vries

J'ai utilisé l'animation lors du routage/en cliquant dans l'angle 2. Cela fonctionne pour onClick également . Utilisez ce code pour tous les types de routage, vous pouvez utiliser une animation séparée pour un changement d'itinéraire distinct ou onclick.

import { animate, AnimationEntryMetadata, state, style, transition, trigger } from '@angular/core';
export const slideInDownAnimation: AnimationEntryMetadata =
  trigger('routeAnimation', [
    state('*',
      style({
        opacity: 1,
        backgroundColor:'#43a047',
        transform: 'translateX(0)'
      })
    ),
    transition(':enter', [
      style({
        opacity: 0,
        backgroundColor:'#333',
        transform: 'translateX(-100%)'
      }),
      animate('0.2s ease-in')
    ]),
    transition(':leave', [
      animate('0.5s ease-out', style({
        opacity: 0,
        backgroundColor:'red',
        transform: 'translateY(100%)'
      }))
    ])
  ]);

Vous pouvez également modifier le code ci-dessus en fonction de votre choix.

0
Shubham Verma