Try using the amp-bind component:
<!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>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
