Javascript CSS3过渡和；transform在删除类时效果不佳

我制作了一些不错的汉堡包效果，这在移动导航栏的网站上很常见

因此，当有人单击汉堡包时，它会完美地旋转X（当添加“打开”类时），但当该类删除时，动画会发生奇怪的变化，请在以下代码中观察效果：

HTML:

Javascript:

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

---

您能帮我一下吗？

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

• 在

  选择器中设置前向转换的设置。打开
  选择器。当添加
  .open
  类时，第二个子类的
  不透明度
  将在0.3s的持续时间内转换，没有任何延迟。同时，其他两个孩子的
  top
  位置也在转换中。然后在
  0.3s
  延迟后，转换第一个和第三个孩子的
  变换。这会产生顶部和底部杆向下移动然后旋转的效果

• 在默认选择器中，将其正反面设置为

  transition

  设置。也就是说，立即对第一个和第三个子级转换进行

  转换

  ，持续时间为

  0.3s

  ，而这两个子级的

  top

  和第二个子级的

  opacity

  在延迟

  0.3s

  后转换。当元素丢失

  .open

  类时，此设置将应用，因此将产生相反的效果

$（文档）.ready（函数（）{
$（“#汉堡”）。单击（函数（）{
$（this.toggleClass（'open'）；
});
});
汉堡{
浮动：左；
宽度：20px；
高度：25px；
位置：相对位置；
}
#汉堡包{
宽度：100%；
高度：3倍；
边界半径：5px；
背景：#000000；
位置：绝对位置；
显示：块；
变换：旋转3d（0,0,1,0度）；
}
#汉堡包跨度：第n个孩子（1）{
排名：0；
过渡：前0.3s缓进输出0.3s，转换0.3s缓进；
}
#汉堡包跨度：第n个孩子（2）{
顶部：7px；
不透明度：1；
过渡：不透明度0.3s缓进缓出0.3s；
}
#汉堡包跨度：第n个孩子（3）{
顶部：14px；
过渡：前0.3s缓进输出0.3s，转换0.3s缓进；
}
#汉堡包。开放跨度：第n个孩子（1）{
顶部：7px；
变换：旋转3d（0,0,1,45度）；
过渡：前0.3秒缓进缓出，转换0.3秒缓0.3秒；
}
#汉堡包。开放跨度：第n个孩子（2）{
不透明度：0；
过渡：不透明度0.3s缓进缓出；
}
#汉堡包。开放跨度：第n个孩子（3）{
顶部：7px；
变换：旋转3d（0,0,1，-45度）；
过渡：前0.3秒缓进缓出，转换0.3秒缓0.3秒；
}

请显示您的代码，以便我们查看问题所在。刚刚添加，抱歉！

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

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