web-dev-qa-db-fra.com

Angular 2 Animation - déclencheur booléen?

J'essaie de déclencher une transition liée à une propriété booléenne, mais cela ne semble pas se déclencher.

Voici une version réduite de mon déclencheur d'animation

trigger(
  'trueFalseAnimation', [
    transition('* => true', [
      style({backgroundColor: '#00f7ad'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ]),
    transition('* => false', [
      style({backgroundColor: '#ff0000'}),
      animate('2500ms', style({backgroundColor: '#fff'}))
    ])
  ]
)

HTML:

<div [@trueFalseAnimation]="model.someProperty">Content here</div>

Tester:

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = true;
        setTimeOut(() => {
            this.model.someProperty = false;
        }, 5000);    
    }, 1000)
}

Le déclencheur ne se produit jamais lorsque le someProperty change.

Comme test rapide, j'ai changé le déclencheur pour utiliser une chaîne et cela fonctionne

trigger(
      'trueFalseAnimation', [
        transition('* => Success', [
          style({backgroundColor: '#00f7ad'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ]),
        transition('* => Failed', [
          style({backgroundColor: '#ff0000'}),
          animate('2500ms', style({backgroundColor: '#fff'}))
        ])
      ]
    )

Tester:

ngOnInit() {

    setTimeout(() => {
        this.model.someProperty = "Success";
        setTimeOut(() => {
            this.model.someProperty = "Failed";
        }, 5000);    
    }, 1000)
}

Le deuxième exemple fonctionne très bien

Mes questions sont

  1. Les booléens sont-ils pris en charge comme déclencheurs?
  2. Si oui à # 1, que fais-je de mal?
angulartypescriptangular2-animation
23
Steven Yates
  1. Il semble que non. J'ai vu qu'un problème ( 12337 ) a déjà été soulevé pour cela, mais il n'y a pas eu de mise à jour jusqu'à présent.
  2. Une autre alternative consiste à utiliser 1 et 0 au lieu de vrai et faux.

Voir le plunker de ici .

trigger('isVisibleChanged', [
      state('true' , style({ opacity: 1, transform: 'scale(1.0)' })),
      state('false', style({ opacity: 0, transform: 'scale(0.0)'  })),
      transition('1 => 0', animate('300ms')),
      transition('0 => 1', animate('900ms'))
])
26
ScottL

J'ai le même problème. Je ne sais pas si les booléens sont pris en charge en tant que déclencheurs, mais la solution de contournement que j'ai trouvée consistait à définir une propriété de chaîne avec un getter pour renvoyer la valeur booléenne sous forme de chaîne. Quelque chose comme ça:

get somePropertyStr():string {
    return this.someProperty.toString();
}

Vous devez ensuite lier votre animation à cette propriété somePropertyStr.

Encore une fois, c'est une solution de contournement laide, la meilleure chose serait en mesure d'utiliser la valeur booléenne.

3
OvSleep

Un état est défini comme étant une chaîne, nous devons donc nous y tenir.

La manière la plus simple - mais la plus épineuse - basée sur votre code est la suivante:

<div [@trueFalseAnimation]="model.someProperty?.toString()">Content here</div>

Mais c'est assez horrible, donc c'est probablement mieux

<div [@trueFalseAnimation]="model.someProperty ? 'active' : 'inactive'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'visible' : 'hidden'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'up' : 'down'">Content here</div>
<div [@trueFalseAnimation]="model.someProperty ? 'left' : 'right'">Content here</div>

Le meilleur conseil ici serait d'utiliser un état correspondant à ce qu'il signifie réellement. Que signifie vraiment vrai et faux dans ce contexte de toute façon?

J'ai envisagé de créer un tuyau pour convertir un booléen, mais le seul avantage de cela serait de s'assurer que vous êtes cohérent avec vos chaînes d'état.

1
Simon_Weaver