Question

我已成功在我的网站上实施星级评分。用户点击后是否可以隐藏星星？我用过

form.amp-form-submit-success > input {
  display: none
}

但它不起作用。

Answer 1

尝试使用 amp-bind 组件：

<!DOCTYPE html>
<html ⚡>

<head>
  <meta charset="utf-8" />
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1" />
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp-boilerplate>
    body {
      -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      animation: -amp-start 8s steps(1, end) 0s 1 normal both;
    }

    @-webkit-keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }

    @-moz-keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }

    @-ms-keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }

    @-o-keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }

    @keyframes -amp-start {
      from {
        visibility: hidden;
      }

      to {
        visibility: visible;
      }
    }
  </style>
  <noscript>
    <style amp-boilerplate>
      body {
        -webkit-animation: none;
        -moz-animation: none;
        -ms-animation: none;
        animation: none;
      }
    </style>
  </noscript>
  <style amp-custom>
  </style>
</head>

<body>
  <h1>Star rating hidden after sending success form</h1>
  <form method="post" action-xhr="https://amp.dev/documentation/examples/api/submit-form-input-text-xhr" on="submit-success:AMP.setState({ratingHidden: true})">
    <span [hidden]="ratingHidden">★</span>
    <span [hidden]="ratingHidden">★</span>
    <span [hidden]="ratingHidden">★</span>
    <span [hidden]="ratingHidden">★</span>
    <span [hidden]="ratingHidden">★</span>
    <button type="submit">Send</button>
  </form>
</body>

</html>

现场演示： https://codepen.io/alexandr-kazakov/pen/gOwBbBO

AMP 星级评定成功后隐藏表格

1 个答案: