css - 如何制作汉堡菜单的动画 - 交叉

Question

我已经开始使用 CSS3 制作动画了。

我尝试创建一个动画汉堡菜单，但结果有点难看。顶部和底部的条向右平移一点。所以旋转动画不是很流畅和正确。

这是结果 =>

这是我的代码:

/* HTML */

<div id="burger">
  <span id="burgerTop" class="burgerLineTop"></span>
  <span id="burgerCenter" class="burgerLineCenter"></span>
  <span id="burgerBottom" class="burgerLineBottom"></span>
</div>

/* CSS 代码 */

#burger {
  position: absolute;  
  margin: 50px;
}

.burgerLineTop {
  width: 50px;
  height: 5px;
  background: black;
  position: absolute;
}

.burgerLineCenter {
    width: 50px;
    height: 5px;
    background: black;
    position: absolute;
    top: 15px;
}

.burgerLineBottom {
    width: 50px;
    height: 5px;
    background: black;
    position: absolute;
    top: 30px;
}

.burgerLineTopAnimation {
  transform-origin: 0 0;
  transition: all 500ms ease-in-out;
  transform: rotate(45deg);
}

.burgerLineCenterAnimation {
  transition: all 500ms ease-in-out;
  opacity: 0;
}

.burgerLineBottomAnimation {
  transform-origin: 0 0;
  transition: all 500ms ease-in-out;
  transform: rotate(-45deg);
}

/* JS */

var burgermenu = document.querySelector('#burger');

burgermenu.addEventListener('click', function() {
    var burgerTop = document.querySelector('#burgerTop');
    var burgerCenter = document.querySelector('#burgerCenter');
    var burgerBottom = document.querySelector('#burgerBottom');
    var burgerTopCL = burgerTop.classList;
    var burgerCenterCL = burgerCenter.classList;
    var burgerBottomCL = burgerBottom.classList;

    burgerTopCL.contains('burgerLineTopAnimation') ? burgerTopCL.remove('burgerLineTopAnimation') : burgerTopCL.add('burgerLineTopAnimation');
    burgerCenterCL.contains('burgerLineCenterAnimation') ? burgerCenterCL.remove('burgerLineCenterAnimation') : burgerCenterCL.add('burgerLineCenterAnimation');
    burgerBottomCL.contains('burgerLineBottomAnimation') ? burgerBottomCL.remove('burgerLineBottomAnimation') : burgerBottomCL.add('burgerLineBottomAnimation');
});

jsfiddle

也许我在 transition-origin 上做错了......

我知道 jsfiddle 等有很多代码示例。但我想正确学习 css 动画等。所以我想了解为什么我的代码不好以及我应该改进什么。以及 css 动画/css 是如何工作的。

我希望你能帮助我:)谢谢，祝你周五愉快。

Answer 1

定位条，使它们在两种状态下都相对于父项处于相同位置，然后使用 transform-origin: 50%

var burgermenu = document.querySelector('#burger');

burgermenu.addEventListener('click', function() {
	var burgerTop = document.querySelector('#burgerTop');
	var burgerCenter = document.querySelector('#burgerCenter');
	var burgerBottom = document.querySelector('#burgerBottom');
	var burgerTopCL = burgerTop.classList;
	var burgerCenterCL = burgerCenter.classList;
	var burgerBottomCL = burgerBottom.classList;

	burgerTopCL.contains('burgerLineTopAnimation') ? burgerTopCL.remove('burgerLineTopAnimation') : burgerTopCL.add('burgerLineTopAnimation');
	burgerCenterCL.contains('burgerLineCenterAnimation') ? burgerCenterCL.remove('burgerLineCenterAnimation') : burgerCenterCL.add('burgerLineCenterAnimation');
	burgerBottomCL.contains('burgerLineBottomAnimation') ? burgerBottomCL.remove('burgerLineBottomAnimation') : burgerBottomCL.add('burgerLineBottomAnimation');
});

#burger {
  position: absolute;  
  margin: 50px;
  height: 50px;
  border: 1px dashed #999;
  width: 50px;
}

.burgerLineTop {
  top: 7.5px;
}

.burgerLineCenter {
    top: 22.5px;
}

.burgerLineBottom {
    top: 37.5px;
}

#burger span {
  height: 5px;
  background: black;
  position: absolute;
  width: 100%;
  transition: all 500ms ease-in-out;
}

.burgerLineTopAnimation {
  transform: rotate(45deg);
}

.burgerLineCenterAnimation {
  opacity: 0;
}

.burgerLineBottomAnimation {
  transform-origin: 0 0;
  transform: rotate(-45deg);
}

.burgerLineBottomAnimation, .burgerLineTopAnimation {
    transform-origin: center;
    top: 50%;
}

<div id="burger">
  <span id="burgerTop" class="burgerLineTop"></span>
  <span id="burgerCenter" class="burgerLineCenter"></span>
  <span id="burgerBottom" class="burgerLineBottom"></span>
</div>