如何创建动画汉堡菜单-DEV365 开发者社区

介绍

我首先在我的个人网站中使用react-svg-morph来为我的图标（特别是菜单图标）进行动画。不幸的是，react-svg-morph没有维护（5年和计数），这意味着它仍然使用一些过时的同行依赖性，更重要的是，它在KB中不值得（因为我只是一件事使用它！）。

。

因此，我决定创建一个自己的汉堡菜单图标，答案不是使SVG动画，实际上，我的方法与react-svg-morph无法远。

tldr

没有时间阅读全文，只想查看完整的代码，这里是

只有几行代码，您可以轻松地为网站的汉堡图标创建动态和引人注目的动画！

html

<body>
  <main id="main">
    <div></div>
    <div></div>
    <div></div>
  </main>
</body>

CSS

main {
  cursor: pointer;
}

div {
  height: 4px;
  width: 40px;
  background-color: white;
  border-radius: 4px;
  margin: 8px 0;
  transition: 0.75s linear;
}

.on > div:nth-child(2) {
  opacity: 0;
  transform: rotate(360deg) scale(0.2);
}

.on > div:first-child {
  transform: rotate(45deg) translate(8px, 9px);
}

.on > div:last-child {
  transform: rotate(-45deg) translate(8px, -9px);
}

body {
  background-color: hsl(180deg 100% 25%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

JavaScript

const main = document.getElementById("main");

const toggleClass = () => {
  main.classList.toggle("on");
};

main.addEventListener("click", toggleClass);

最终产品正在本网站上使用，该代码可在codepen

上使用

如何指导

<main id="main">
  <div></div>
  <div></div>
  <div></div>
</main>

要开始，您需要在一个<main>容器中创建三个<div>元素，每个元素代表汉堡图标中的三个笔触之一。为了创建笔触，您需要为每个<div>元素定义高度，宽度和对比的背景颜色，并在它们之间添加一些边距。

div {
  height: 4px;
  width: 40px;
  background-color: white;
  border-radius: 4px;
  margin: 8px 0;
  /* Add animation to chance in states */
  transition: 0.75s linear;
}

一旦您拥有三个笔触，就该创建动画，将汉堡图标转换为近距离图标。为此，您需要通过将“ On”类添加到它。

<main id="main" class="on">
  <div></div>
  <div></div>
  <div></div>
</main>

要创建关闭图标，您需要隐藏中风并旋转其他两个冲程以形成“ X”形状。您可以使用不透明度并转换属性来实现这一目标。

.on > div:nth-child(2) {
  opacity: 0;
  /* Rotate while hiding it */
  transform: rotate(360deg) scale(0.2);
}

随后，我们需要旋转其他两个元素以形成关闭（x）符号

.on > div:first-child {
  transform: rotate(45deg) translate(8px, 9px);
}

.on > div:last-child {
  transform: rotate(-45deg) translate(8px, -9px);
}

最后，您需要添加一个切换函数，该函数在单击汉堡包图标时添加并删除<main>容器中的“ ON”类。

记住，我们所有的笔触（<div>）都嵌套在main#main中。因此，我们可以使用它让我们

知道何时单击图标
知道当前状态
更改当前状态

现在，我们只需要展示我们希望第二个状态的外观，这就是为第二个状态创建新样式。

const main = document.getElementById("main");

const toggleClass = () => {
  main.classList.toggle("on");
};

main.addEventListener("click", toggleClass);

您有了它 - 一个简单但有效的动画，将您的网站的汉堡图标转换为只有几行代码的近距离图标。如果您有任何建议或反馈，请随时在评论中分享它们！