CSS，JQuery：动画变换从3行菜单到交叉 [英] CSS, JQuery: Animated transform from 3 lines menu to cross

问题描述

>

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

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





如何实现？





这里是小提琴 a href =http://jsfiddle.net/eaNEE/65/ =nofollow noreferrer> http://jsfiddle.net/eaNEE/65/





HTML：

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

SASS：

 code>＃menu-toggle-btn {
 margin：15px 10px; 
 width：30px; 
 cursor：pointer; 
 left：15px; 
 z-index：10; 
 
& .js-transform {
 span {
显示：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：rotation（-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; 
 marg：5px; 
} 
} 
  




解决方案

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

strong> jQuery：

  $（menu-toggle-btn 
 $（this）.toggleClass（open）; 
}）; 
  




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屋！