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秒。与此同时，其他两个孩子的top位置也正在转变。然后在0.3s延迟后，第1个和第3个孩子的transform被转换。这样可以使顶部和底部杆向下移动然后旋转。
在默认选择器中将其精确反转设置为transition设置。也就是说，在第一个和第三个孩子的transform过渡时间为0.3s，同时这两个孩子的top和第二个孩子的opacity已经过渡延迟0.3s之后。当元素丢失.open类时，此设置将适用，因此会产生相反的效果。

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

CSS3过渡＆amp;变换在类删除方面效果不佳

1 个答案: