Tenho usado a seguinte animação há algum tempo e ela funciona bem para expandir/recolher um elemento:
const expanded = style({ height: '*', opacity: 1 });
const collapsed = style({ height: 0, opacity: 0 });
const animation = animate(`300ms cubic-bezier(0.4, 0.0, 0.2, 1)`);
export const expandCollapse = trigger('expandCollapse', [
transition(':enter', [collapsed, animation, expanded]),
transition(':leave', [animation, collapsed]),
]);
E isso funciona muito bem para animar um elemento quando ele é exibido ou oculto via *ngIf:
<div *ngIf="isExpanded" @expandCollapse>
<!-- Content Here -->
</div>
Aparentemente, nunca usei isso com conteúdos que usam um gap, porque quando faço a animação "encaixa" no começo e no fim. Pensei que poderia resolver isso também animando a gappropriedade, mas sem sorte:
const expanded = style({ height: '*', gap: '*', opacity: 1 });
const collapsed = style({ height: 0, gap: 0, opacity: 0 });
Como posso amenizar isso?
Aqui está um StackBlitz que demonstra o comportamento atual.