Amp html 自定义noscript样式无法通过AMP验证，将其与样板文件混淆_Amp Html

Amp html 自定义noscript样式无法通过AMP验证，将其与样板文件混淆

amp-html

Amp html 自定义noscript样式无法通过AMP验证，将其与样板文件混淆,amp-html,Amp Html,我的AMP HTML页面上有几个元素的不透明动画。我已将这些元素的样式设置为具有opacity:0，以便可以淡入如果用户禁用了javascript并且元素不能淡入，我希望它们具有opacity:1 我已经尝试在我的中使用此HTML来实现它： <style amp-custom> .bubble-animated { opacity: 0; } </style> <noscript> <style amp-custom&

我的AMP HTML页面上有几个元素的不透明动画。我已将这些元素的样式设置为具有

opacity:0

，以便可以淡入

如果用户禁用了javascript并且元素不能淡入，我希望它们具有

opacity:1

我已经尝试在我的

中使用此HTML来实现它：

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


.气泡动画{
不透明度：0；
}
.气泡动画{
不透明度：1；
}

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

属性“amp custom”可能不会出现在标记“noscript>style[amp样板]-old variant”中。（在第二个标签上）
标记“noscript enclosure for boilerplate”在文档中多次出现。（在实际样板
标签上）

我已经尝试了这方面的一些变化，但我无法让我的页面进行验证。我的网站的完整HTML页面可在以下位置获得：

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

改变

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

页脚{
边缘顶部：3rem；
边缘底部：1rem；
显示器：flex；
证明内容：之间的空间；
}
.气泡动画{
不透明度：1；
}

到

页脚{
边缘顶部：3rem；
边缘底部：1rem；
显示器：flex；
证明内容：之间的空间；
}
.气泡动画{
不透明度：1；
}

您可以使用

html

标记上的属性来检查AMP库的JS是否已加载到页面上

html标记可能如下所示：

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

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

我不确定这对我有什么帮助，因为如果浏览器启用了javascript，我不希望不透明度为1。这就是我使用noscript标记的原因。我特别希望这些元素在网站加载时不可见，这样我就可以使用动画将它们淡入淡出。你是什么意思

启用javascript

？唯一启用的javascript是amp库。如果未启用amp库，则页面将被扭曲。我希望我的站点在通常禁用javascript的浏览器中正确显示。由于我的网站非常简单，它不需要AMP库来正确显示。使用马库斯的答案，我成功地使它工作。明白了-我误解了这个问题这个概念工作得很好，除了它只需要一个规则，如so

html[amp-version]。气泡动画{opacity:0；}

谢谢。编辑它

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