Burgermenu：CSS 中的动画（“两”行的旋转和变换）

Question

我一直在摆弄一个动画的小问题，但我无法真正找出问题所在。

我有这个来自w3 schools 的完美工作示例，但我的情况有点不同。我试图在我的汉堡菜单中有 2 条可见线，它们都应该小一点。

我有 this 工作代码。

给我带来麻烦的代码如下：

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

我尝试用许多不同的数字更改翻译语句，并尝试阅读以弄清楚翻译语句在放置时的确切作用，就像它们在旋转之后一样。我只是不知道如何让两条线在它们的“起始”位置创建一个十字（即不向右或向左移动 - 太多）

我的问题是：

• 翻译语句在放置时会做什么 是？
• 我怎么知道如何让我的线条在起始位置创建一个十字？

我基本上是在寻找一种自己解决问题的好方法。但是，如果一个聪明的头脑可以为我提供我的解决方案，我不会介意。 :)

Answer 1

您无需通过反复试验来猜测translate 的数字。您可以非常简单地计算它们。

这就是为什么在上面的答案中添加一些有用的信息，即如何计算应该用于翻译的数字。

谈谈你的例子。

.bar1, .invis, .bar3 {
  width: 35px;
  height: 2px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

bar 的高度是 2px，bar1-invis 和 invis-bar3 之间的空间都是 6px。请记住，这些栏有collapsing margins。这意味着这些边距重叠，并且条形之间的距离将等于一个边距的大小。

垂直我们应该将条移动到中间（invis bar的位置）。

整个汉堡图标的高度是多少？

• 对于带有opacity: 0 的bar2 点击后：18px (2px + 6px + 2px + 6px + 2px)
• 对于带有display: none 的bar2 点击后：10px (2px + 6px + 2px)

在这个例子中，我们的边框是 0px，所以我们不考虑它们。

我们需要移动 bar1 和 bar3 多少才能使它们位于中间的相同位置？

• 在 opacity: 0; 的情况下，它将是边距大小 + 对象高度，在我们的示例中为 8px。
• 在 display: none; 的情况下（我假设对象垂直居中），它将是（边距 + 高度）/2（在我们的例子中是 4px）。

然后我们将其中一根柱子旋转 45 度，另一根柱子旋转 -45 度。

这是其工作原理的直观展示：

然后将过渡添加到 CSS。

剩下的就是这个：

.change .bar1 {
  -webkit-transform: rotate(-45deg) translateY(8px);
  transform: rotate(-45deg) translateY(8px);
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translateY(-8px);
  transform: rotate(45deg) translateY(-8px);
}

.change .invis {
  opacity: 0;
}

或者这个：

.change .bar1 {
  -webkit-transform: rotate(-45deg) translateY(4px);
  transform: rotate(-45deg) translateY(4px);
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translateY(-4px);
  transform: rotate(45deg) translateY(-4px);
}

.change .invis {
  display: none;
}

Answer 2

通过玩一些数字，我达到了这一点：

看起来很像 X 图标。

function myFunction(x) {
  x.classList.toggle("change");
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar3 {
  width: 35px;
  height: 2px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.invis {
  width: 35px;
  height: 2px;
  margin: 6px 0;
}

.change .bar1 {

  transform: rotate(-45deg) translate(-5px, 6px) ;
}

.change .bar3 {

  transform: rotate(45deg) translate(-5px, -6px);
}
  

<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="invis"></div>
  <div class="bar3"></div>
</div>

Answer 3

翻译语句在放置时会做什么 是？

因为每个条的中心点不同，所以它们的引用不同。

我怎样才能弄清楚如何让我的线条在它们的线条中创建一个十字 起始位置？

您必须以某种方式移动条形图，使用position 属性（top/right/bottom/left）、translate 或其他方式。做对并不容易，因为它在一个container里面，有特定的大小，所以每个case都不一样，bar的位置也不同。

我强烈建议使用DevTools 来调整container 内的element。

container中间是这样的：

.change .bar1 {
    transform: rotate(-45deg) translate(-7px, 5px);
}

.change .bar3 {
    transform: rotate(45deg) translate(-6px, -4px);
}

我希望这有助于澄清一些观点。

Answer 4

function myFunction(x) {
  x.classList.toggle("change");
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar3 {
  width: 35px;
  height: 2px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

.invis {
  width: 35px;
  height: 2px;
  margin: 6px 0;
}


.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 6px);
  transform: rotate(-45deg) translate(-5px, 6px);
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-5px, -6px);
  transform: rotate(45deg) translate(-5px, -6px);
}

<p>Click on the Menu Icon to transform it to "X":</p>
<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="invis"></div>
  <div class="bar3"></div>
</div>

应该可以。

这些数字是 X 和 Y 位置。因为你去掉了中间线，所以位置有点偏了。

• X：两者应该相同。增加/减少向左或向右移动。
• Y：应该是相反的，所以它们形成了一个漂亮的十字架。