Question

我正在尝试使用query实现分组动画。没什么好想的，请淡入。

我当前正在使用此设置：

const animationStylePart = style({ opacity: 1, transform: 'none' });
const animatePart = animate('500ms 1000ms ease-out', animationStylePart);
const staggerPart = stagger(1000, [animatePart]);
const initialStylePart = style({ opacity: 0, transform: 'translateY(20px)' });
const queryBlasonPart = query('div, mat-divider', [initialStylePart, staggerPart]);
const transitionPart = transition(':enter', [queryBlasonPart]);
const triggerPart = trigger('homeAnimations', [transitionPart]);

export const homeAnimations = triggerPart;

在以下HTML上

<div @homeAnimations>
  <div>...</div>
  <mat-divider></mat-divider>
  <div>...</div>
  <!-- You get the idea -->
</div>

出现的问题是当我添加深度级别时：

<div @homeAnimations>
  <div>
    <div>...</div>
  </div>
  <mat-divider></mat-divider>
  <!-- ... -->
</div>

在这种情况下，查询选择器会获取每个div，而不仅仅是直接子级，这会导致不良行为。

我还没有找到仅查询直接子级的方法。

我已经尝试了几种方法，

> *               → compilation error
* > div           → only the grandchildren
*                 → everything

尽管后者是一种工作，但它们是我要避免的解决方法，我宁愿能够直接查询直接子代。

有人可以回答我吗？

查询动画：仅直子

0 个答案: