（Angular 5.2.8）

我正在尝试创建一个盒子，它可以通过按钮按下来转换几组元素，基本上是一个小向导的东西 . 为此，我使用this article中的示例滑动框，它只是创建一个与其父级一样宽200％的div，并将其水平翻译为0到50％以翻转页面 .

我希望通过为每个子窗格的子项添加淡入淡出效果来增强此设置以更符合我的设计，以便用户离开的窗格中的控件在它们移开时显示淡出，并且用户输入的窗格中的控件似乎淡入 .

为此，我增强了现有动画以对父动画进行分组，并对每个子div进行了查询，以适当地设置不透明度 . 这有效 - 但只有从右窗格到左窗格时才有效 . 从左窗格到右窗格不执行转换，只执行淡入淡出 .

HTML：

<div class="parent" [@slide]="activePane">
  <div class="left-pane"><ng-content select="[leftPane]"></ng-content></div>
  <div class="right-pane"><ng-content select="[rightPane]"></ng-content></div>
</div>

CSS：

:host {
  display: block;
  overflow: hidden;

  background-color: blue;
  color: white;

  width: 500px;
}

.parent {
  height: 100%;
  width: 200%;

  display: flex;

  div {
    flex: 1;
  }
}

动画宣言：

animations: [
  trigger('slide', [
    state('left', style({ transform: 'translateX(0)' })),
    state('right', style({ transform: 'translateX(-50%)' })),
    transition('left => right', group([
      animate(600),
      query('.right-pane', [
        animate(600, style({ opacity: 1 }))
      ]),
      query('.left-pane', [
        animate(600, style({ opacity: 0 })),
      ])
    ])),
    transition('right => left', group([
      animate(600),
      query('.left-pane', [
        animate(600, style({ opacity: 1 })),
      ]),
      query('.right-pane', [
        animate(600, style({ opacity: 0 }))
      ])
    ]))
  ])
]

这是一个示例，显示问题：https://stackblitz.com/edit/angular-p4gdhf

如何让它在两个方面都消失？

angular angular-animations