javascript - Angular Animations 完成后重置样式

Question

我目前正在创建一些 Angular 动画。我正在触发由列表组成的 div 上的动画。触发动画时，我想折叠列表，然后将整个 div 滑出视口。我的问题是，height当父 div 的动画被触发时，列表的 被重置。

我的代码如下所示：

trigger('removeAnimation', [
  transition(':leave', [
    query('.container', animate('1s ease-in', style({ height: 0 })
    )),
    animate('1s ease-in', keyframes([
      style({ transform: 'translate3d(0, 0, 0)', offset: 0.33 }),
      style({ transform: 'translate3d(-150%, 0, 0)', opacity: 0, offset: 0.66 }),
      style({ transform: 'translate3d(-150%, 0, 0)', opacity: 0, height: 0, offset: 1.0 })
    ]))
  ])
])

在查询.container完成之后，在animate执行块之前，.container'高度恢复到它的'开始高度。然后它执行animate.

我如何保持新的height？我试图添加一个stylebetween queryandanimate和作为一种解决方法。但是，我始终不知道height父母的情况。

编辑：我想出了一个“解决方法”。您可以在查询后添加以下内容以强制 div 重新设置其高度，而无需（现在缺少）子 div：

style({ height: 'auto' })

对我来说，这暂时可行，但这只是因为我的变化很小。如果我要在查询中为多个内容设置动画，我想这样维护会更加困难。

标签： javascriptcssangularcss-animations