当角动画时CSS子边不折叠

Question

我有两个垂直堆叠的父母盒子，每个盒子都有几个孩子。这些孩子有固定的边缘-顶部和边缘-底部.在静态环境中，这些子边距会崩溃。

默认情况下，第二个父框是隐藏的，可以通过按钮进行切换。将角度动画应用于第二个父框会产生一种奇怪的行为，在动画期间，孩子的边缘不能正常地折叠。

我构建了一个可工作的最小问题斯塔克布利茨示例

是什么导致了这种行为？我能在不改变html和子程序的边距的情况下修复它吗？(例如，仅删除页边距顶不适用于我的情况)

Answer 1

您可以查询子空间，删除它们的边距、动画，并将边距放回原处(这是隐式完成的)

工作实例

export const ENTER_LEAVE_ANIMATION = trigger('enterLeaveAnimation', [
  transition(':enter', [
    query('.child', style({ marginTop: 0 }), { optional: true }),
    itemInvisibleStyle,
    animate('2000ms ease-out', itemVisibleStyle),
  ]),
  transition(':leave', [
    query('.child', style({ marginTop: 0 }), { optional: true }),
    itemVisibleStyle,
    animate('2000ms ease-in', itemInvisibleStyle),
  ]),