时间戳

首页 > 解决方案 > AMP 中的替代文字

html - AMP 中的替代文字

问题描述

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

这里的想法是使用具有相反交替可见性的表格行：可见可见性：折叠动画，因为我希望每一行文本出现在同一个位置。所以我有 2 个表格行，里面有文本，每个行在可见 5 秒和折叠 5 秒之间交替相对。对观众来说，希望它看起来就像一行文本，两个句子交替出现。样板文件等已正确编码（它作为有效的 AMP 页面传递），但我没有在此处包含标题代码以节省空间。

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

标签： htmljsonamp-htmlalternatingamp-animation

解决方案

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

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

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

推荐阅读