Javascript 如何在angular中设置父对象和子对象的动画？

所以从我能说的一切来看，这应该是有效的。。。但它不

我试图让父级（ui开关槽）在颜色之间转换，而子级（ui开关狗）移动

按原样使用此代码，它为父级和子级设置“false=>true”动画，但仅在执行“true=>false”时才设置子级动画

有没有一种方法可以在不显式地为父对象和子对象写入关键帧的情况下执行此操作？我想我可以定义州风格和时间，它可以处理其余的事情（它几乎做到了）。如果我注释掉查询（':self'），则加密狗将在这两种状态下正常工作。如果我注释掉查询（'@dongleState'），那么groove在这两种状态下都能正常工作

我还可以让它一个接一个地为这两个部分制作动画，但这不是我想要做的

app.component.html

---

看起来过渡动画组中的顺序确实很重要。我把它分成两个过渡段

        transition('inactive => active',[
            group([
                query(':self', [ animate('500ms') ]),
                query('@dongleState', [ animateChild() ])
            ])
        ]),
        transition('active => inactive',[
            group([
                query('@dongleState', [ animateChild() ]),
                query(':self', [ animate('500ms') ]),
            ])
        ]),

我想现在它正在按预期工作

---

看起来，动画组中的过渡顺序确实很重要。我把它分成两个过渡段

        transition('inactive => active',[
            group([
                query(':self', [ animate('500ms') ]),
                query('@dongleState', [ animateChild() ])
            ])
        ]),
        transition('active => inactive',[
            group([
                query('@dongleState', [ animateChild() ]),
                query(':self', [ animate('500ms') ]),
            ])
        ]),

我想现在它正在按预期工作

---

例如，在上面玩一些代码会很有帮助。例如，在上面玩一些代码会很有帮助。谢谢。知道为什么重要吗？不知道，可能是一些内部错误。谢谢。知道它为什么重要吗？不知道，可能是一些内部错误。

<div class="ui-switch-wrapper">
    <div class="ui-switch-groove test" (click)="slide($event)" [@grooveState]="stateString">
        <div class="ui-switch-label" (click)="slide($event)">{{ state === true ? text : alt }}</div>
        <div class="ui-switch-dongle" (click)="slide($event)" [@dongleState]="stateString" ></div>
        <input class="ui-switch-input" type="checkbox" [(ngModel)]="state" hidden>
    </div>
</div>

.ui-switch-wrapper {
  display: inline;
  --positive-primary-color: #5cb85c;
  --positive-secondary-color:#33cc66;
  --negative-primary-color: #FD0011;
  --negative-secondary-color: #f64437;
  --tertiary-color: #DDDDDD;
  --quartenary-color: #FFFFFF;
  --switch-height: 50px;
  --switch-width: 200px;
  --switch-padding: 5px;
}

.ui-switch-groove {
  background-color: var(--positive-primary-color);
  position: relative;
  display: flex;
  height: var(--switch-height);
  width: var(--switch-width);
  vertical-align: middle;
  align-items: center;
  cursor: pointer;
  border-radius: calc( var(--switch-height) / 2);
}

.ui-switch-dongle {
  position: absolute;
  transform: translateX(5px);
  height: 40px;
  width: 40px;
  border-radius: 100%;
  background-color: var(--tertiary-color);
  content: "";
}

.ui-switch-label {
  display: inline;
  position: relative;
  font-size: 28px;
  color: var(--quartenary-color);
  padding-left: calc(var(--switch-height) / 2);
  user-select: none;
  vertical-align: middle;
  margin-left: 5px;
}

        transition('inactive => active',[
            group([
                query(':self', [ animate('500ms') ]),
                query('@dongleState', [ animateChild() ])
            ])
        ]),
        transition('active => inactive',[
            group([
                query('@dongleState', [ animateChild() ]),
                query(':self', [ animate('500ms') ]),
            ])
        ]),