Question

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

我的代码如下：

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？我试图在style和query之间添加一个animate，这是一种解决方法。但是，我并不总是知道父母的height。

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

style({ height: 'auto' })

对我来说，这目前可以解决，但仅因为我的更改很小。如果要为查询中的多个内容设置动画，我想这样维护起来会困难得多。

完成后，Angular Animations会重置样式

0 个答案: