Burgermenu：CSS 中的动画（"two" 行的旋转和变换）

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);
}

我曾尝试用这么多不同的数字来更改翻译语句，并且我尝试阅读以弄清楚翻译语句在像旋转之后那样放置时到底做了什么。我只是不知道如何让这两条线在它们的 "starting" 位置创建一个十字（即不向右或向左移动 - 太多）

我的问题是：

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

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

Answer 1

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：两者应该相同。 Increase/decrease 向左或向右移动它。
Y: 应该是相反的，所以它们形成了一个很好的交叉。

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

What does the translate statements do when they are placed like they are?

因为每根柱子的中心点不一样，所以它们的参考点也不一样

How could I figure out how to make my lines create a cross in their starting position?

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

强烈推荐使用DevTools调整container里面的element。

中间是这样的container:

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

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

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

Answer 4

您无需通过反复试验来猜测 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。这意味着这些边距重叠，条形之间的距离将等于一个边距的大小。

在垂直方向上，我们应该将条移到中间（隐形条的位置）。

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

点击后 opacity: 0 的 bar2：18px (2px + 6px + 2px + 6px + 2px)
点击后 display: none 的 bar2：10px (2px + 6px + 2px)

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

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

在 opacity: 0; 的情况下，它将是边距大小 + 对象高度，因此在我们的示例中为 8px。
在 display: none; 的情况下（我假设对象垂直居中），它将是 (margin + height) / 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;
}

Burgermenu：CSS 中的动画（"two" 行的旋转和变换）

Burgermenu: Animation in CSS (Rotate and Transform of "two" lines)

css

animation

translate-animation