Início / coding / Perguntas / 78995847
Accepted
BizzyBob
Asked: 2024-09-18 05:14:16 +0800 CST

Como obter animação suave com conteúdo usando 'gap' no Angular?

  • 772

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.

angular

1 respostas

  1. Best Answer

    O problema que você está enfrentando é porque as alterações de CSS grid ou flex gap não são automaticamente animáveis ​​com animações básicas de CSS ou Angular. A propriedade gap não é diretamente suportada para transações suaves em muitos navegadores, levando ao efeito de encaixe.

    Para corrigir isso, você pode usar uma solução alternativa na qual você anima explicitamente o espaço usando propriedades de margem ou preenchimento, que são totalmente animáveis.

    1. Remova a propriedade gap dos estilos de animação e, em vez disso, anime as margens ou preenchimentos dos elementos filhos internos.
    2. Adicione elementos wrapper ao redor do conteúdo para controlar margens ou preenchimentos.

    Deixe-me dar-lhe o código atualizado.

    Modifique os estilos:

    const expanded = style({ height: '*', opacity: 1, marginTop: '*', marginBottom: '*' });
const collapsed = style({ height: 0, opacity: 0, marginTop: 0, marginBottom: 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]),
]);

    Atualize o HTML:

    <div *ngIf="isExpanded" @expandCollapse>
  <div class="content-wrapper">
    <!-- Content Here -->
  </div>
</div>

    Adicionar CSS (opcional)

    .content-wrapper {
  display: flex; /* or grid, if needed */
  /* other styling */
}
    • 1

relate perguntas