jquery - CSS、JQuery : Animated transform from 3 lines menu to cross

Question

我想知道如何创建动画，将 3 行菜单变成十字形。以下按钮的结构如上图所示。这 3 条线是使用 3 个跨度创建的，交叉是使用前后元素和旋转过渡创建的。现在我只使用 jquery 来切换改变按钮外观的类，但我想实现一些不错的动画效果，例如

1. 3 行菜单中的一行消失了
2. 其余 2 条线旋转并创建十字

当然，还有从十字菜单到三行菜单的逆过程。

如何实现？

这是 fiddle http://jsfiddle.net/eaNEE/65/

HTML:

  <div id="menu-toggle-btn">
    <span></span>
    <span></span>
    <span></span>
  </div>

SASS:

  #menu-toggle-btn {
    margin: 15px 10px;
    width: 30px;
    cursor: pointer;
    left: 15px;
    z-index: 10;

    &.js-transform {
        span {
            display: none !important;
        }

        &:before, &:after {
            content: "";
            width: 4px;
            height: 25px;
            display: block;
            background: #1d1d1b;
        }

        &:before {
          -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
        }
        &:after {
                      -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
            margin-top: -25px;
        }

    }

    span {
        display: block;
        background: #1d1d1b;
        height: 4px;
        width: 30px;
        margin: 5px;
    }
}

Answer 1

这是 fiddle http://jsfiddle.net/uwozd36q/1/

HTML:

<div class="menu-toggle-btn">
    <span></span>
    <span></span>
    <span></span>
</div>

SASS:

.menu-toggle-btn{
    margin: 15px;
    cursor: pointer;
    width: 30px;
    height: 30px;

    span{
        background: #1d1d1b;
        display: block;
        width: 30px;
        height: 4px;
        border-radius: 5px;
        margin-bottom: 5px;
        -webkit-transition: all 0.5s linear;
        transition: all 0.3s linear;
    }
    &.open{
        span{
            &:nth-child(1),
            &:nth-child(3){
                transform: translate(0px, 13px) rotate(-45deg) scalex(1.3);
                margin: 0;
            }
            &:nth-child(2){
                height: 0;
                margin: 0;
            }
            &:nth-child(3){
                transform: translate(0px, 9px) rotate(45deg) scalex(1.3);               
            }
        }
    }
}

jQuery:

$(".menu-toggle-btn").click(function() {
    $(this).toggleClass("open");
});