CSS，JQuery的：动画从3线改造菜单穿越 [英] CSS, JQuery: Animated transform from 3 lines menu to cross

问题描述

我想知道如何创建动画将改造3成荫的菜单成十字形。以下按钮的结构上面勾画的图片。 3线使用3跨度创建并使用之前创建交叉和元素和旋转转换之后。现在我只使​​用jQuery切换类，改变按钮的样子，但我想实现一些不错的，动画效果的如

1. 3成荫的菜单自败的一行


2. 剩下的2线旋转，并创建交叉

和当然，从横将3-内衬菜单时逆过程。

如何实现的？

这里的小提琴
http://jsfiddle.net/eaNEE/65/

HTML

 ＆LT; D​​IV ID =菜单切换-BTN＆GT;
    ＆LT;跨度＆GT;＆LT; / SPAN＆GT;
    ＆LT;跨度＆GT;＆LT; / SPAN＆GT;
    ＆LT;跨度＆GT;＆LT; / SPAN＆GT;
  ＆LT; / DIV＆GT;
 

上海社会科学院：

 ＃菜单切换，BTN {
    保证金：15px的10px的;
    宽度：30PX;
    光标：指针;
    左：15px的;
    的z-index：10;    ＆安培; .js文件变换{
        跨度 {
            ！显示：无重要;
        }        ＆安培;：前，＆安培;：{后
            内容：;
            宽度：4PX;
            高度：25像素;
            显示：块;
            背景：＃1d1d1b;
        }        ＆安培;：前{
          -ms变换：旋转（45deg）; / * IE 9 * /
    -webkit-变换：旋转（45deg）; / *浏览器，Safari浏览器，歌剧* /
    变换：旋转（45deg）;
        }
        ＆安培;：{后
                      -ms变换：旋转（-45deg）; / * IE 9 * /
    -webkit-变换：旋转（-45deg）; / *浏览器，Safari浏览器，歌剧* /
    变换：旋转（-45deg）;
            的margin-top：-25px;
        }    }    跨度 {
        显示：块;
        背景：＃1d1d1b;
        高度：4PX;
        宽度：30PX;
        利润率：5像素;
    }
}
 

解决方案

这里的小提琴的 http://jsfiddle.net/uwozd36q/1/

HTML：

 ＆LT; D​​IV CLASS =菜单切换-BTN＆GT;
    ＆LT;跨度＆GT;＆LT; / SPAN＆GT;
    ＆LT;跨度＆GT;＆LT; / SPAN＆GT;
    ＆LT;跨度＆GT;＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
 

上海社会科学院

 。菜单，切换-BTN {
    保证金：15px的;
    光标：指针;
    宽度：30PX;
    高度：30PX;    跨度{
        背景：＃1d1d1b;
        显示：块;
        宽度：30PX;
        高度：4PX;
        边界半径：5像素;
        保证金底：5像素;
        -webkit-过渡：所有0.5S线性的;
        过渡：所有的0.3秒线性的;
    }
    ＆安培;。开{
        跨度{
            ＆安培;：第n个孩子（1）
            ＆安培;：第n个孩子（3）{
                变换：翻译（0像素，13像素），旋转（-45deg）将scaleX（1.3）;
                保证金：0;
            }
            ＆安培;：第n个孩子（2）{
                高度：0;
                保证金：0;
            }
            ＆安培;：第n个孩子（3）{
                变换：翻译（0像素，9px）旋转（45deg）将scaleX（1.3）;
            }
        }
    }
}
 

jQuery的：

  $（菜单切换-BTN）。点击（函数（）{
    $（本）.toggleClass（开放）;
}）;
 

I am wondering how to create an animation that would transform a 3 lined menu into a cross. The structure of the following buttons is sketched on the picture above. The 3 lines are created using 3 spans and the cross is created using before and after elements and rotate transition. Now I only use jquery to toggle class that changes the look of the button, but I would like to achieve some nice, animated effect such as

1. one line of the 3-lined menu dissapears
2. the rest 2 lines rotates and creates the cross

and of course, inverse process when going from cross to 3-lined menu.

How to achieve that?

Here's the 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;
    }
}

解决方案

Here's the 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");
});

这篇关于CSS，JQuery的：动画从3线改造菜单穿越的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！