javascript - style - title tag html5

Animaciones angulares que fallan para la configuración de opacidad(y más errores)

Question

Tengo un componente de tarjeta que envuelve otros componentes diferentes dentro. Es como un componente envolvente para hacer que la interfaz de usuario sea elegante; Supongo que has visto este enfoque muchas veces.

Lo que quiero decir es que quiero que estas tarjetas sean ocultas, simplemente mostrando el pie de página (que, por cierto, también es creado por el componente secundario, no por la propia tarjeta).

Por lo tanto, mi enfoque para manejar animaciones, es:

1. Hago clic en el icono que cambia la tarjeta entre visible y oculto.
2. Produce (con @Output ()) alguna variable que se usa en el elemento secundario para ocultar la parte del componente que solo desea mostrar cuando la tarjeta está "activada".
3. Esta misma variable se usa en dos animaciones diferentes: una en la tarjeta, para hacerla más pequeña, y otra en el componente interno, para ocultar la parte que no desea mostrar cuando la tarjeta está "desactivada".

Puede ver el panorama general con estos pequeños fragmentos, comenzando por la implementación:

<card [title]="''DATE SELECT''" class="col" (cardOpen)="config?.cardStatus[''dateselect''] = $event">
   <date-picker-wrapper class="date-wrapper" [cardOpen]="config?.cardStatus[''dateselect'']" [config]="config" [dateranges]="dateranges" [doubleDateRange]="false">
   </date-picker-wrapper>
</card>

Componente interno:

<div class="row margin upper-margin" [@animate]="cardOpen">
    // lots of code
</div>

Componente padre (tarjeta):

@Component({
    selector: "card",
    styleUrls: ["./card.css"],
    template: `
    <div class="col card" [@animate]="enabled">
      <div class="row card-header">
        {{title}}
        <i (click)="switchVisibility()" class="fa fa-chevron-down icon-right"></i>
      </div>
      <ng-content></ng-content>

    </div>
    `,
    animations: [
      trigger(''animate'', [
        state(''false'', style({
          minHeight: "98px",
          height: "98px",
          maxHeight: "98px",

        })),
        state(''true'', style({
          minHeight: "270px",
          height: "270px",
          maxHeight: "270px"
        })),
        transition(''false => true'', animate(''400ms ease-in'')),
        transition(''true => false'', animate(''400ms ease-out''))
      ])
    ]
})

Está bien, este enfoque " funciona ". Mira los gifs y juzga por ti mismo:

Comportamiento con clics "normales": https://gyazo.com/2c24d457797de947e907eed8a7ec432e

Error extraño al hacer clic rápido (uno de varios diferentes que aparecen en esta situación): https://gyazo.com/bdc8dde3b24b712fa2b5f4dd530970dc

Está bien, esto es raro. Mira cómo está mi código en el componente interno para ocultar la parte que no quiero mostrar:

animations: [
  trigger(''animate'', [
    state(''false'', style({
      opacity: 0
    })),
    state(''true'', style({
      opacity: 1
    })),
    transition(''false => true'', animate(''100ms'')),
    transition(''true => false'', animate(''100ms''))
  ])
]

Intenté poner la transición, la "facilidad de entrada", la "facilidad de salida" y las opciones de "atenuación", pero nada parece cambiar el comportamiento. Ni siquiera cambiando la duración. Ninguno de estos cambios evita que ocurran estos errores , y absolutamente, nadie hace que haga lo que yo quiero: hacer que esa parte del componente aparezca lentamente, por lo que la opacidad aumenta / disminuye lentamente de un estado al otro, en lugar de aparecer repentinamente / desapareciendo.

Answer 1

Si trabaja con un componente que cambia su visibilidad, tiene que trabajar con dos alias de transición:

• :enter que es equivalente a void => * estado de transición.
• :leave que sea equivalente a * => void estado de transición * => void .

Puedes leer la documentación oficial aquí o mirar en youtube .