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

2019-10-27 01:47:23 阅读：217 来源： 互联网

标签：css3 css-transitions css javascript jquery

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

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

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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