Question

我正在使用amp-user-notification在台式机上显示时事通讯注册表单（通过amp-iframe），在移动设备上显示精简的text / cta版本。

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

您可以在我们的登台站点上查看此问题，这里： https://winefolly.staging.wpengine.com/

这是一个粘贴有我完整代码的馅饼： https://www.pastiebin.com/5c10ffee0703c

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

有什么想法吗？

Answer 1

我设法弄清楚了这个问题。我的媒体查询中没有不透明度和可见性关键帧（du！）。

动画的更新代码为：

<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>

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

1 个答案: