Question

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

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

结果如下 =＆gt;

这是我的代码：

/ * HTML * /

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

/ * CSS CODE * /

#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

也许我对转型起源犯了错误......

我知道jsfiddle等有很多代码示例但我想正确学习css动画等。所以我想理解为什么我的代码不好以及我应该做得更好。以及css动画/ css如何真正起作用。

我希望你能帮助我:) 谢谢，星期五好。

Answer 1

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

＆＃13;

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

＆＃13;

#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%;
}

＆＃13;

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

＆＃13;

如何动画burgermenu - cross

1 个答案: