css - CSS动画中的小故障

我为响应式菜单图标创建的CSS动画中有一个很小的故障，单击该菜单图标会变成“ X”。制作完X形状后，菜单图标的顶行会向下闪烁约1像素，因此，一旦其他形状停止，它仍将有效地移动。我已经纠缠了好几个小时，但一直没能阻止它的发生-有人能想到我可以做到这一点的方法，甚至是实现该动画的更好方法吗？

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

HTML：
    

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

</span>

CSS：

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

jQuery的：

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

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

    });

});

最佳答案

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

例

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