CSS动画中的轻微故障

Question

在CSS动画中出现了一个非常小的故障我已经为响应式菜单图标做了一个变成＆＃34; X＆＃34;点击时。一旦X形状完成，菜单图标的顶行就会闪烁约1px，因此一旦其他人停止，它就会有效地移动。我已经把它弄乱了好几个小时但是还没有能够阻止它发生 - 有人能想到我能做到这一点的方式，甚至更好的方法来实现这个动画吗？

https://jsfiddle.net/8nj5y4t1/58/

HTML：     

upload_max_filesize

CSS：

    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>

</span>

jQuery的：

.menu-button {
    position: relative;
    top: 0;
    right: 0;
    display: inline-block;
    z-index: 10;
    width: 21px;
    height: 14px;
    padding: 2px 0 2px 0;
    cursor: pointer;
    vertical-align: middle;
}

.bar {
    display: block;
    position: absolute;
    width: 21px;
    height: 2px;
    background-color:#888;
    -webkit-transition: all .8s;
    transition: all .8s;
}

.bar:nth-child(3n) {
    top: 2px;
}

.bar:nth-child(3n+1) {
    top: 8px;
    opacity:1;
}

.bar:nth-child(3n+2) {
    top: 14px;
}

.bar.open {
    background-color:#666;
}

.bar:nth-child(3n).open {
    transform: rotate(45deg);
    width: 23px;
    left: -1px;
    top: 7.5px;
}

.bar:nth-child(3n+1).open {
    opacity:0;
}

.bar:nth-child(3n+2).open {
    transform: rotate(-45deg);  
    width: 23px;
    left: -1px;
    top: 7.5px;
}

Answer 1

.bar:nth-child(3n+1)顶级属性以及.bar:nth-child(3n).open和.bar:nth-child(3n+2).open顶级属性应该具有相同的值;

示例

我将top:7.5px替换为top:8px .bar:nth-child(3n).open和.bar:nth-child(3n+2).open

jQuery(document).ready(function($) {    

    $('.menu-button').click(function() {
        $('.bar').toggleClass('open');

    });

});

.menu-button {
    position: relative;
    top: 0;
    right: 0;
    display: inline-block;
    z-index: 10;
    width: 21px;
    height: 14px;
    padding: 2px 0 2px 0;
    cursor: pointer;
    vertical-align: middle;
}

.bar {
    display: block;
    position: absolute;
    width: 21px;
    height: 2px;
    background-color:#888;
    -webkit-transition: all .8s;
    transition: all .8s;
}

.bar:nth-child(3n) {
    top: 2px;
}

.bar:nth-child(3n+1) {
    top: 8px;
    opacity:1;
}

.bar:nth-child(3n+2) {
    top: 14px;
}

.bar.open {
    background-color:#666;
}

.bar:nth-child(3n).open {
    transform: rotate(45deg);
    width: 23px;
    left: -1px;
    top: 8px; /* Changed this from 7.5px to 8px */
}

.bar:nth-child(3n+1).open {
    opacity:0;
}

.bar:nth-child(3n+2).open {
    transform: rotate(-45deg);  
    width: 23px;
    left: -1px;
    top: 8px; /* Changed this from 7.5px to 8px */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <span class="menu-button">
  
				<span class="bar"></span>
				<span class="bar"></span>
				<span class="bar"></span>
  
			</span>