练习动画最好的方式：SVG+GSAP实现曲线转场效果

效果展示：

简单说明：

单击汉堡按钮
主要内容（本例中的<main>和<footer>）在向下移动时隐藏
在 <path>GSAP 时间线中更改 d 属性的值，使其从屏幕顶部显示在底部，以覆盖整个屏幕，并用黑色绘制
移动菜单屏幕时显示，同时处理 5.
在 <path>GSAP 时间线中更改 d 属性的值，以便将屏幕涂成黑色，然后从屏幕顶部消失到底部
（关闭按钮使此操作倒退）

我认为，在许多情况下，在 Web 生产中，它是固定标头。如果要修改固定标头，请在<header>调整 CSS 后更正 JS 的以下部分。（如果要将其他元素直接放在包装器下方，也是如此。

const CONTENTS = {
  HEADER: document.getElementById("header"),
  MAIN: document.getElementById("main"),
  FOOTER: document.getElementById("footer")
};

gsap.timeline()
//.........
.to(
  [CONTENTS.HEADER, CONTENTS-.MAIN, CONTENTS.FOOTER], // 添加CONTENS.HEADER

代码

HTML

在HTML整体包装器中

汉堡按钮
菜单
主要内容
页脚
SVG元素（gnyon元素）

包括在内

由于SVG是固定的，因此基本上似乎没有任何问题。

<div class="wrapper">
  <button></button>
  <nav></nav>
  <main></main>
  <footer></footer>
  <svg class="overlay" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
    <path id="overlayPath" class="overlayPath" vector-effect="non-scaling-stroke" d="M 0 100 V 100 Q 50 100 100 100 V 100 z" />
  </svg>
</div>

关于SVG

实际变化为黑色的元素是<path>元素。（如果将<path>的填充方式更改为fill，则Gunyon的颜色将会改变。）您可以通过更改<path>中D属性的值来更改颜色并填充形状。

此外，SVG 是 position: absolute，但这仅限于具有固定高度的布局和页面。

这次在抽屉菜单中实现它时，<body>和wrapper的高度将根据内容量而更改。然后，如果它是绝对的，它将一直延伸到<body>的高度，并且曲线将是锋利而丑陋的，因此我将其更改为position:fixed

我认为有关D属性的解释将很长，因此，如果您有兴趣，可以百度

preserveAspectRatio="none" 是什么？

<svg>上的此属性似乎是视图框和视口之间的兼容性关系。

preserveAspectRatio属性指示提供给定纵横比的视图框的元素如何适合具有不同纵横比的视口。

vector-effect="non-scaling-stroke" 是什么？

附加到<path>的这个属性似乎在绘制时指定了矢量效果

vector-effect属性指定绘制对象时要使用的矢量效果

使用 GSAP 制作精美的动画

这一次，需要更改汉堡按钮和菜单的aria-hidden和aria-label，所以我用 CSS 应用了最小样式，并基本上在 GSAP 时间线内处理它。

我本来可以在GSAP中给它一个类，让它由CSS控制，但是我个人发现很难理解该流程，因此我也敢于控制时间表上的CSS。