CSS3的过渡和变换在类移除时工作不正常

Question

我已经制作了一些漂亮的汉堡菜单效果，在移动导航栏的网站上这种效果是非常普遍的。

所以当有人点击汉堡菜单时，它会完美地变成 X（添加“打开”类时），但当类被移除时，动画会出现奇怪的变化，请在下面的代码中查看效果：

HTML:

<div id="hamburger">
    <span></span>
    <span></span>
    <span></span>
</div>

CSS：

#hamburger {
  float: left;
  width: 20px;
  height: 25px;
  position: relative;
}

#hamburger span {
  width: 100%;
  height: 3px;
  border-radius: 5px;
  background: #000000;
  position: absolute;
  display: block;
  -webkit-transform: rotate3d(0, 0, 1, 0deg);
  -moz-transform: rotate3d(0, 0, 1, 0deg);
  -o-transform: rotate3d(0, 0, 1, 0deg);
  transform: rotate3d(0, 0, 1, 0deg);
}

#hamburger span:nth-child(1) {
  top: 0;
  -moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
  -o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
  -webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
  -webkit-transition-delay: 0s, 0.3s;
  transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}

#hamburger span:nth-child(2) {
  top: 7px;
  opacity: 1;
  -moz-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  -webkit-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
}

#hamburger span:nth-child(3) {
  top: 14px;
  -moz-transition: top 0.3s ease-in-out, -moz-transform 0.3s ease 0.3s;
  -o-transition: top 0.3s ease-in-out, -o-transform 0.3s ease 0.3s;
  -webkit-transition: top 0.3s ease-in-out, -webkit-transform 0.3s ease;
  -webkit-transition-delay: 0s, 0.3s;
  transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}


#hamburger.open span:nth-child(1) {
  top: 7px;
  transform: rotate3d(0, 0, 1, 45deg);
}

#hamburger.open span:nth-child(2) {
  opacity: 0;
}

#hamburger.open span:nth-child(3) {
  top: 7px;
  transform: rotate3d(0, 0, 1, -45deg);
}

Javascript：

$(document).ready(function () {
    $('#hamburger').click(function () {
        $(this).toggleClass('open');
    });
});

点击这里，可以帮您解决问题吗？

- MyLibary

---

请展示你的代码，这样我们才能看到问题所在。 - Ashmore11

刚刚添加，抱歉！ - MyLibary

Answer 1

您可以通过以下方式更正删除动画：

• 在.open选择器中设置前向过渡的设置。当添加.open类时，第二个子元素的opacity将在0.3秒的持续时间内过渡，没有任何延迟。同时，其他两个子元素的top位置也正在过渡。然后，经过0.3秒延迟，第1个和第3个子元素的transform也会过渡。这给人一种上下条移动然后旋转的效果。
• 将其精确反向设置为默认选择器中的transition设置。也就是说，使第1个和第3个子元素上的transform立即过渡，持续0.3秒，而这两个子元素的top和第2个子元素的opacity则在0.3秒延迟后过渡。当元素失去.open类时，将应用此设置，因此会产生相反的效果。

$(document).ready(function() {
  $('#hamburger').click(function() {
    $(this).toggleClass('open');
  });
});

#hamburger {
  float: left;
  width: 20px;
  height: 25px;
  position: relative;
}
#hamburger span {
  width: 100%;
  height: 3px;
  border-radius: 5px;
  background: #000000;
  position: absolute;
  display: block;
  transform: rotate3d(0, 0, 1, 0deg);
}
#hamburger span:nth-child(1) {
  top: 0;
  transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger span:nth-child(2) {
  top: 7px;
  opacity: 1;
  transition: opacity 0.3s ease-in-out 0.3s;
}
#hamburger span:nth-child(3) {
  top: 14px;
  transition: top 0.3s ease-in-out 0.3s, transform 0.3s ease;
}
#hamburger.open span:nth-child(1) {
  top: 7px;
  transform: rotate3d(0, 0, 1, 45deg);
  transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}
#hamburger.open span:nth-child(2) {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
#hamburger.open span:nth-child(3) {
  top: 7px;
  transform: rotate3d(0, 0, 1, -45deg);
  transition: top 0.3s ease-in-out, transform 0.3s ease 0.3s;
}

<div id="hamburger">
  <span></span>
  <span></span>
  <span></span>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

- Harry