css - 向下滚动时删除 AMP-Animation 中的 div

Question

需要来自 Google-AMP 工作人员的帮助。

我试图在向下滚动时隐藏 div 的特定部分(导航栏中的元素)。

假设我需要隐藏这个 div。

<div id="divToHide">This div is to hide on scroll down. </div>

AMP 动画代码:

<amp-animation id="hideDiv"
  layout="nodisplay">
  <script type="application/json">
    {
      "duration": "200ms",
      "fill": "both",
      "iterations": "1",
      "direction": "alternate",
      "animations": [{
        "selector": "#divToHide",
        "keyframes": [{
          "display": "none"
        }]
      }]
    }
  </script>
</amp-animation>

AMP 位置观察器代码:

<amp-position-observer on="enter:hideDiv.start" layout="nodisplay"></amp-position-observer>

当我将 display: none 更改为以下内容时“不透明度”:“0”，“可见性”:“隐藏”。

div 内容消失了，但它仍然占用空间。它不应像 display: none 那样占用空间。帮我锻炼显示无类型的解决方案。

Answer 1

在 amp 动画的关键帧中不允许显示无。尽管这并不适用于所有情况。但无论如何这对我有用。

我将元素移出屏幕，它看起来像是隐藏的。这是解决方案。

"keyframes": [{
   "transform": "translateY(-80px)"
}]

元素在视口(viewport)之间某处的技巧，您可以简单地在 X 轴上移动它，即 100vw

"transform": "translateY(100vw)"
or
"transform": "translateY(200vw)"

第二个更安全。

希望这会有所帮助。谢谢