当传递给Angular Animations的query（）函数时，如何传递两个style（）函数？

Question

作为角度动画的新手，我已经阅读了几次angular.io动画文档，以了解它是如何工作的。我认为我有一个很好的理解，但是有些情况下文档没有解释。

鉴于这个启动器project，我有一个关于他们使用query()方法与多个style()函数的问题。

在上面引用的this file中的github项目中，有一个动画使用我在网上找不到任何解释。

`

query(
      ':leave > *',
      [
        style({ transform: 'translateY(0%)', opacity: 1 }),
        animate(
          '0.2s ease-in-out',
          style({ transform: 'translateY(-3%)', opacity: 0 })
        ),
        style({ position: 'fixed' })
      ],
      { optional: true }
    )

`

我的理解是第一个style()函数传递到query()函数，为任何离开的元素及其任何子元素设置初始样式，用:leave > *表示。然后animate()函数将使用提供的0.2s ease-in-out随时间style()为此元素设置动画。但是最后的style({ position: 'fixed' })应该做什么？

我可以将其删除，但我没有发现任何明显的变化。我可以将传入的对象修改为style({ background: 'red' })，并且我没有任何可见的更改。它有什么作用？

Answer 1

我终于明白了。

简短版本：

最后一个style({ position: 'fixed' })的原因是获取正在离开的元素（在这种情况下是组件）并确保它不影响其他传入元素的样式。

长版：

进入DOM的新元素（或组件）仍然在与离开DOM的元素（或组件）“共享”视图或“文档流”。这意味着，即使旧元素（或组件）不可见，两个元素（或组件）也是正常文档流的一部分。这意味着如果我们有一个应该出现在新元素（或组件）下方的页脚将不会显示在新组件的正下方，而是它将显示在文档的底部，紧接在旧元素之后从DOM中删除。一旦旧元素被删除并且我们没有使用第三个'style（{position：'fixed'}）'属性，我们就会看到页脚正好显示在新元素的下方。

“固定”位置将旧的并且此时不可见元素移出文档流，为新元素和页脚留出空间以按预期显示。

这可以通过更改来轻松测试

`style({ transform: 'translateY(0%)', opacity: 1 }),
              animate(
                and increasing the time==>'1.2s ease-out',
                style({ transform: 'translateY(-3%)', opacity: 1 <== this })
              ),`

看看到底发生了什么。我希望这可以帮助别人！