在AMP中删除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更改为下面的"opacity": "0", "visibility": "hidden"时。

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

Answer 1

amp动画的关键帧中不允许显示none。虽然这并不是对所有情况都有效。但不管怎样，这对我是有效的。

我把元素移出了屏幕，它看起来像是隐藏的。以下是解决方案。

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

元素在视口之间的一个技巧，你可以简单地在X轴上移动它，即100vw

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

第二个更安全。

希望这能有所帮助。谢谢