AMP 中的替代文本

Question

我想让一行文字快速淡入，停留约 5 秒，快速淡出，然后让另一行文字快速淡入，停留约 5 秒，快速淡出，然后在 AMP 中无限重复此操作。最好的方法是什么？这是我遇到的不起作用的问题：我认为 AMP-Animation 可能是实现此目标的最佳方式，但页面上没有发生任何事情，我什至还没有让每个淡入淡出并持续 5 秒。

这里的想法是使用 table 行和相反交替的 visibility:visible visibility:collapse 动画，因为我希望每行文本出现在同一个位置。因此，我将有 2 table 行，其中每行中的文本彼此相对，在可见 5 秒和折叠 5 秒之间交替。对于观众来说，希望它看起来只是一行文本，两个句子相互交替。样板等编码正确（它作为有效的 AMP 页面传递），但我没有在此处包含 header 代码以保存 space.

<body>
        <amp-animation layout="nodisplay" trigger = "visibility">
            <script type="application/json">
      {
        "selector": ".NoticesTable1",
        "duration": "8s",
        "easing": "ease",
        "iterations": "infinite",
        "keyframes": 
            {"transform": ["visibility:collapse", "visibility:visible"]}

        }
        </script>
            </amp-animation>

        <amp-animation layout="nodisplay" trigger="visibility">
        <script type="application/json">
      {
        "selector": ".NoticesTable2",
        "duration": "8s",
        "easing": "ease",
        "iterations": "infinite",
        "keyframes":    
        {"transform": ["visibility:visible", "visibility:collapse"]}
        }
        </script>
            </amp-animation>
        <div class="NoticesBackground"><table class="NoticesTable">
<tr class="NoticesTable1"><p class="Notices">Text 1 here</p></tr>
        <tr class="NoticesTable2"><p class="Notices2">Text 2 here</p></tr>
        </table></div>

Answer 1

我在 AMP playground 中测试了您的代码，发现在开发人员工具中检查时 <table> 和 <tr> 元素不可见。我不确定为什么 table 元素会出现这种行为。

使用 amp-observer 我可以触发动画，这里是工作代码。我在哪里使用 <p> 元素类作为 amp 动画选择器

<amp-animation id="anime1" layout="nodisplay">
    <script type="application/json">
          {
            "duration": "8s",
            "fill": "both",
            "direction": "reverse",
            "animations": [
              {
                "selector": ".Notices",
                "keyframes": {"opacity": [1, 0]}
              }
            ]
          }
    </script>
</amp-animation>

<amp-animation id="anime2" layout="nodisplay">
     <script type="application/json">
          {
            "duration": "8s",
            "fill": "both",
            "direction": "reverse",
            "animations": [
              {
                "selector": ".Notices2",
                "keyframes": {"opacity": [1, 0]}
              }
            ]
          }
    </script>
</amp-animation>


    <div class="NoticesBackground">
      <table class="NoticesTable">
        <tr class="NoticesTable1">
          <amp-position-observer on="enter:anime1.start" layout="nodisplay">
          </amp-position-observer>

          <p class="Notices">Text 1 here</p>
       </tr>
        <tr class="NoticesTable2">

             <amp-position-observer on="enter:anime2.start" layout="nodisplay">
            </amp-position-observer>
          <p class="Notices2">Text 2 here</p>
        </tr>
    </table>

如果在每个 <p> 标签可见性中不需要触发器，您可以在 <table> 元素之前使用单个 amp-observer。

AMP 中的替代文本

Alternate text in AMP

html

json

amp-html

alternating

amp-animation