CSS，JQuery：从3行菜单到交叉的动画变换

Question

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

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

当然，从十字架到三线菜单的逆过程。

如何实现？

这是小提琴 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

这里是小提琴 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");
});