navigationend - Angular 2 animación-disparador booleano?

title angular 6

Question

Estoy tratando de activar una transición vinculada a una propiedad booleana, pero esto no parece dispararse.

Aquí hay una versión reducida de mi disparador de animación.

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>

Probar:

ngOnInit() {

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

El disparador nunca ocurre cuando cambia someProperty .

Como una prueba rápida cambié el disparador para usar una cadena y funciona

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

Probar:

ngOnInit() {

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

El segundo ejemplo funciona bien

Mis preguntas son

1. ¿Son compatibles los booleanos como activadores?
2. Si sí al # 1, ¿qué estoy haciendo mal?

Answer 1

1. Parece que no. Vi que ya se ha planteado un problema ( 12337 ) para esto, pero hasta ahora no ha habido ninguna actualización.
2. Otra alternativa es usar 1 y 0 en lugar de verdadero y falso.

Ver el plunker desde here .

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''))
])

Answer 2

Estoy teniendo el mismo problema. No estoy seguro si los booleanos son compatibles como activadores, pero la solución que encontré fue definir una propiedad de cadena con un captador para devolver el valor booleano como una cadena. Algo como esto:

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

Entonces deberías enlazar tu animación a esa propiedad somePropertyStr .

Una vez más, esta es una solución fea, lo mejor sería poder usar el valor booleano.

Answer 3

Un estado se define como una cadena, por lo que debemos mantenernos en eso.

La forma más simple, pero más áspera, basada en su código es esta

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

Pero esto es bastante horrible, así que probablemente sea mejor.

<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>

El mejor consejo aquí sería utilizar un estado que corresponda a lo que realmente significa. ¿Qué significa verdadero y falso realmente en este contexto?

Consideré hacer una tubería para convertir un booleano, pero el único beneficio de eso sería asegurarte de que estás siendo consistente con las cadenas de tu estado.