2

html 工作者。

我正在为 amp-html 动画而苦苦挣扎。

我想在 amp-img 进入视口时为其设置动画。到目前为止,一切都很好。我们已经做到了。然而:尽管在文档中被引用为工作:这不起作用。帕格代码:

<amp-animation id="fadeIn1" layout="nodisplay">
  script(type="application/json").
    [
      {
        "selector": ".fadein2",
        "duration": "3200ms",
        "delay": "111ms",
        "easing": "ease-out",
        "iterations": "1",
        "fill": "both",
        "keyframes": [
          {"transform": "translate3d(0px, 110px,0)","clip-path":"circle(100px)"},
          {"transform": "translate3d(0px, 0px,0) ","clip-path":"circle(200px)"}
        ]
      }
    ]
</amp-animation>
<amp-position-observer on="enter:fadeIn1.start" layout="nodisplay">
</amp-position-observer>

图像(在 Pug 中)

amp-img.cover.fadein2.p0.m0.z4(src=require(`Images/${img4}`), alt=alt1, width="51", height="51", layout="responsive")|

amp-img 本身显示得非常好并且正在转换。只是裁剪动画不起作用。你们中有人成功做到了吗?

任何关于我愚蠢的暗示都会有所帮助。任何关于解决方案的提示都会更好。

干杯,米

4

0 回答 0