BizzyBob's questions

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

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 。