Question

我在AMP HTML页面上有两个元素的不透明动画。我将这些元素设置为具有opacity: 0的样式，以便可以淡入。

如果用户禁用了JavaScript并且无法淡入元素，我希望它们具有opacity: 1。

我已经尝试在<head>中使用此HTML来实现它：

<style amp-custom>      
   .bubble-animated {
    opacity: 0;
  }
</style>
<noscript>
  <style amp-custom>
    .bubble-animated {
      opacity: 1;
    }
  </style>
</noscript>

但是，我从AMP验证器收到以下两个错误：

“ amp-custom”属性可能不会出现在标签“ noscript> style [amp-boilerplate]-旧版本”中。（在第二个<style amp-custom>标签上）
标签“用于样板的noscript附件”在文档中出现了多次。（在实际的样板<noscript>标签上）

我已经尝试了一些变化，但是我无法验证我的页面。我的网站的完整HTML页面可在此处找到：https://pastebin.com/uAMCcQur

实现此目标的正确方法是什么？可能吗？

Answer 1

您可以使用html标记上的属性来检查AMP库的JS是否已加载到页面上。

html标记可能如下所示：

<html ⚡="" lang="de" amp-version="1531347091169" class="i-amphtml-singledoc i-amphtml-standalone" style="padding-top: 0px !important;">

属性amp-version可用于在css中进行如下检查：

<style amp-custom>      
  html[amp-version] .bubble-animated {
    opacity: 0;
  }
</style>

Answer 2

更改

  footer {
    margin-top: 3rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
  }
</style><noscript>
  <style amp-custom>
    .bubble-animated {
      opacity: 1;
    }
  </style>
</noscript>

到

  footer {
    margin-top: 3rem;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
  }

   .bubble-animated {
      opacity: 1;
  }
</style>

自定义Noscript样式无法通过AMP验证，将其与样板混淆

2 个答案: