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

https://jsfiddle.net/phhkL4bu/4/

你能帮帮我吗？

Answer 1

您可以通过执行以下操作来更正删除动画：

• 在.open选择器中设置正向过渡的设置。添加.open类时，第二个孩子的opacity将转换 0.3 秒，没有任何延迟。与此同时，其他2个孩子的top位置也在转变中。然后经过0.3s延迟后，第一个和第 3 个孩子的transform被过渡。这给出了顶部和底部条向下移动然后旋转的效果。
• 将其完全相反设置为默认选择器中的transition设置。也就是说，使第一个和第 3 个孩子的transform立即过渡，持续时间0.3s，而这两个子项的top和第 2 个子项的opacity在延迟0.3s后进行转换。当元素丢失.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>