web-dev-qa-db-fra.com

animation angular2 avec des styles variables

Utilisation de TypeScript & Angular 2.0.0-rc.4

Comment puis-je spécifier des valeurs de propriété de style à partir du modèle afin de pouvoir réutiliser des boutons? Par exemple, si je voulais spécifier une couleur d'arrière-plan différente pour chaque bouton en fonction d'une propriété liée par le modèle. Voir ci-dessous

Supposons le composant suivant:

import {
  Component,
  OnInit,
  OnDestroy,
  Input,
  style,
  state,
  animate,
  transition,
  trigger
} from '@angular/core';

@Component({
  selector: 'my-toggle-button',
  template: `<div @state="state" (click)="click()">{{bgColor}}</div>`,
  animations: [
    trigger('state', [
      state('inactive', style({
        'color': '#606060'
      })),
      state('active', style({
        'color': '#fff',
        'background-color': '#606060' // I want this to be bgColor
      })),
      transition('inactive <=> active', animate('100ms ease-out'))
    ])
  ]
})

export class ToggleButtonComponent implements OnInit {
  @Input() bgColor: string;
  state: string = 'inactive';
  active: boolean = false;

  ngOnInit() {
    this.state = this.active ? 'active' : 'inactive';
  }

  click() {
    this.active = !this.active;
    this.state = this.active ? 'active' : 'inactive';
  }
}

modèle d'appel:

<h1>Animated Directive</h1>
<my-toggle-button [bgColor]="'#f00'"></my-toggle-button>
<my-toggle-button [bgColor]="'#0f0'"></my-toggle-button>
<my-toggle-button [bgColor]="'#00f'"></my-toggle-button>

http://plnkr.co/edit/KBO2pgS8B0lSAPLIf0Js?p=preview

javascriptanimationtypescriptangular
10
nograde

En fonction du titre de cette question, je suppose que vous souhaitez lier des expressions à une configuration d'animation.

Peu importe que la valeur vienne d'une expression de modèle inline ou d'une liaison de propriété sur la classe de composant.

En RC4, cela n’est pas possible, le module/moteur d’animation supporte static/constant definitions . J'utilise le terme définitions et pas styles car de telles liaisons peuvent être utilisées sur les styles ainsi que images clés , transitions , animate et essentiellement toutes les usines de métadonnées d'animation.

Vous devez vous attendre à ce que cette fonctionnalité apparaisse dans l'une des prochaines versions de angular. Vous ne pouvez pas savoir quand, mais cela devrait arriver. Définir les métadonnées des animations en tant que variables référencées plutôt que constantes est très puissant et fondamentalement obligatoire, car il s'agit de l'exigence de base pour animations réutilisables .

Avoir une animation réutilisable ouvrira la voie à une adoption plus large du module d’animation par la communauté. En angulaire 1, il était intégré car le module d’animation utilisait des classes CSS définies globalement pour lancer des animations. partie utilisable.

Dans angular 2, l’approche est différente pour plusieurs raisons (encapsulation, propre analyseur CSS, moteur d’animation non lié à CSS, etc.)

l’animation réutilisable ouvrira le chemin à des bibliothèques tierces complètes pour les animations, pensez animation.css ou ng-fx mais comme un ensemble de directives/modules angulaires.

J'ai ouvert un numéro sur le dépôt angulaire, il y a environ 3 semaines, demandant cette fonctionnalité. Le dev principal de l'animation a confirmé sa venue alors tenez ferme :)

9
Shlomi Assaf

A partir d'aujourd'hui, vous pouvez réaliser ce que vous voulez!

Vous pouvez utiliser le calcul automatique des propriétés!

Dans votre css ou modèle, définissez background-color sur la couleur finale.

<div @state="state" [style.background-color]="bgColor" (click)="click()">{{bgColor}}</div>

Dans votre définition d'animation: 

animations: [
trigger('state', [
  state('inactive', style({
    'color': '#606060',
    'background-color' : 'transparent'

  })),
  state('active', style({
    'color': '#fff',
    'background-color': '*' // <====
  })),
  transition('inactive <=> active', animate('100ms ease-out'))
])
]

quelque chose comme ça devrait marcher!

3
Simon Skriabin

Il est tout à fait possible de le faire depuis Angular v4.2. Vous trouverez des détails dans l'article "Une nouvelle vague de fonctionnalités d'animation en angulaire" . Voir la section n ° 8.

Voici un exemple de code:

import {AnimationBuilder, AnimationPlayer} from "@angular/animations";
@Component({
  selector: 'loader',
  template: `
 <div class="loading-stage">
   <div class="loading-bar" #loadingBar>
     {{ percentage }}%
   </div>
 </div> 
  `
})
export class LoaderComponent {
  @ViewChild('loadingBar')
  public loadingBar;

  public player: AnimationPlayer;
  private _percentage = 0;

  constructor(private _builder: AnimationBuilder) {}

  get percentage() { return this._percentage; }

  @Input('percentage')
  set percentage(p: number) {
    this._percentage = p;

    if (this.player) {
      this.player.destroy();
    }

    const factory = this._builder.build([
      style({ width: '*' }),
      animate('350ms cubic-bezier(.35, 0, .25, 1)', style({ width: (p * 100) + '%' }))
    ]);
    this.player = factory.create(this.loadingBar.nativeElement, {});
    this.player.play();
  }
}
0
Dmitry