javascript-CSS3过渡和转换在类删除方面效果不佳

我已经做了一些很好的汉堡包效果,这在如今的移动导航栏中的网站上非常普遍.

因此,当有人单击汉堡包时,它会完美地旋转X(添加“ open”类时),但是当该类删除时,动画发生了怪异的变化,请在以下代码中观察效果：

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/

你能帮我吗？

解决方法:

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

>在.open选择器中设置前向过渡的设置.当添加.open类时,第二个子项的不透明度将过渡0.3秒,并且没有任何延迟.同时,其他2个孩子的顶部位置也正在转换.然后,经过0.3s的延迟后,第1个和第3个子代的转换将转换.这样就产生了顶部和底部条向下移动然后旋转的效果.
>在默认选择器中将其完全相反的值设置为过渡设置.即,在第一个孩子和第三个孩子的过渡上立即进行转换,持续时间为0.3s,而这两个孩子的顶部和第二个孩子的不透明度在延迟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>

标签：css3,css-transitions,css,javascript,jquery
来源： https://codeday.me/bug/20191027/1940971.html