在初始页面加载时隐藏 amp-user-notification答案

【问题标题】：Hide amp-user-notification on initial page load在初始页面加载时隐藏 amp-user-notification
【发布时间】：2019-05-13 13:35:03
【问题描述】：

我正在使用 amp-user-notification 在桌面上显示简报注册表单（通过 amp-iframe），并在移动设备上显示精简的文本/cta 版本。

当您开始在桌面上滚动时，简报会从右侧滑入，而在移动设备上时则从底部淡入。但问题是 amp-user-notification 容器在您开始滚动之前会短暂显示。我尝试将可见性设置为隐藏的通知添加一个类，但这没有任何效果。

您可以在我们的暂存站点上查看该问题，这里是： https://winefolly.staging.wpengine.com/

下面是我的完整代码： https://www.pastiebin.com/5c10ffee0703c

我在文档中看不到任何关于最初隐藏通知并查看建议的 cookie 同意用例的内容，这是有道理的，但在这种情况下不是。

有什么想法吗？

【问题讨论】：

标签： wordpress amp-html

【解决方案1】：

我设法找出了问题所在。我的媒体查询中没有不透明度和可见性关键帧（呃！）。

动画的更新代码是：

<amp-animation id="showSignup" layout="nodisplay">
<script type="application/json">
{
   "duration": "200ms",
    "fill": "both",
    "iterations": "1",
    "easing": "ease-out",
    "delay": "200ms",
    "direction": "alternate",
    "selector": "#newsletter-slidein",
    "switch": [
      {
        "media": "(min-width: 480px)",
        "keyframes": { "opacity": "1", "visibility": "visible", "transform": "translateX(-365px)" }
      },
      {
        "keyframes": { "opacity": "1", "visibility": "visible" }
      }
    ]
 }
</script>
</amp-animation>
<amp-animation id="hideSignup" layout="nodisplay">
<script type="application/json">
 {
    "duration": "200ms",
    "fill": "both",
    "iterations": "1",
    "direction": "alternate",
    "easing": "ease-in",
    "delay": "0",
    "selector": "#newsletter-slidein",
    "switch": [
      {
        "media": "(min-width: 480px)",
        "keyframes": { "opacity": "0", "visibility": "hidden", "transform": "translateX(-15px)" }
      },
      {
        "keyframes": { "opacity": "0", "visibility": "hidden" }
      }
    ]
 }
</script>
</amp-animation>

【讨论】：