Javascript 如何关闭AMP侧边栏的动画_Javascript_Amp Html

Javascript 如何关闭AMP侧边栏的动画

javascript amp-html

Javascript 如何关闭AMP侧边栏的动画,javascript,amp-html,Javascript,Amp Html,我现在正在努力扩大我的网站。在网站的一部分，我们有一个汉堡菜单，打开覆盖整个视图的覆盖图。我认为使用AMP最好的方法是使用AMP侧边栏组件，但我不喜欢它滑开而不是立即覆盖屏幕。有什么方法可以覆盖这个动画吗？amp侧边栏在这种情况下有点过头了。您可以使用内置的show和hide操作以及hidden属性来实现您自己的边栏： <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <li

我现在正在努力扩大我的网站。在网站的一部分，我们有一个汉堡菜单，打开覆盖整个视图的覆盖图。我认为使用AMP最好的方法是使用AMP侧边栏组件，但我不喜欢它滑开而不是立即覆盖屏幕。有什么方法可以覆盖这个动画吗？

amp侧边栏在这种情况下有点过头了。您可以使用内置的

show

和

hide

操作以及

hidden

属性来实现您自己的边栏：

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <style amp-custom>
    #sidebar {
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background: grey;
    }
  </style>
</head>
<body>
  <h1>Hello AMPHTML World!</h1>
  <button on="tap:sidebar.show">
    Open
  </button>
  <div id=sidebar hidden>
    <h1>
      Sidebar
    </h1>
    <button on="tap:sidebar.hide">
      Close
    </button>
  </div>
</body>
</html>


body{-webkit动画：-amp start 8s steps（1，end）0s1 normal tweet；-moz动画：-amp start 8s steps（1，end）0s1 normal tweet；-ms动画：-amp start 8s steps（1，end）0s1 normal tweet}@-webkit关键帧-amp start{从{可见性：隐藏}到{可见性：可见}}@-moz关键帧-amp start{from{可见性：隐藏}
#边栏{
位置：固定；
排名：0；
底部：0；
左：0；
右：0；
背景：灰色；
}
你好，TML世界！
打开
边栏
接近