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动画的关键帧中不允许显示任何内容。尽管这并非在每种情况下都可行。但这无论如何对我有用。

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

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

一种在视口之间某个位置的元素的技巧，您只需在X轴上移动它即可，即100vw

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

第二个更安全。

希望这会有所帮助。谢谢

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

1 个答案: