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 })
              ),`

查看实际情况。我希望这可以帮助某人！

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

1 个答案: