主页 / coding / 问题 / 78995847
Accepted
BizzyBob
Asked: 2024-09-18 05:14:16 +0800 CST

如何在 Angular 中使用“gap”实现内容流畅的动画？

  • 772

我已经使用以下动画一段时间了，它可以很好地展开/折叠元素：

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]),
]);

当元素显示或隐藏时，这可以很好地实现动画效果*ngIf：

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

显然，我从未在使用 的内容中使用过它gap，因为当我执行动画时，动画会在开始和结束时“捕捉”。我以为我可以通过对gap属性进行动画处理来解决这个问题，但没有成功：

const expanded = style({ height: '*', gap: '*', opacity: 1 });
const collapsed = style({ height: 0, gap: 0, opacity: 0 });

我怎样才能解决这个问题？

下面是一个演示当前行为的StackBlitz 。

angular

1 个回答

  1. Best Answer

    您面临的问题是因为 CSS 网格或 flex 间隙变化无法通过基本 CSS 或 Angular 动画自动动画化。许多浏览器不直接支持 gap 属性以实现流畅的交互，从而导致捕捉效果。

    要修复此问题，您可以使用一种解决方法，即使用边距或填充属性明确地为间隙设置动画，这些属性是完全可动画的。

    1. 从动画样式中删除 gap 属性，并改为对内部子元素的边距或填充进行动画处理。
    2. 在内容周围添加包装元素来控制边距或填充。

    让我给你更新后的代码。

    修改样式：

    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]),
]);

    更新 HTML：

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

    添加 CSS（可选）

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

相关问题