CSS 从汉堡条过渡和变换 --> 单击 X(使用手写笔)

CSS transition & transform from hamburger bars --> X on click (using stylus)

我有一个用于移动断点的菜单汉堡包 "icon"。我将其设置为 3 行,我希望它们转换为 X(这将关闭菜单)。

我希望顶部栏转 45 度,中间栏消失,底部栏转 45 度。然后顶部和底部的条将向上移动并创建一个 X

截至目前....只要我按住鼠标,它就会显示动画。为什么会这样?我只需要动画在点击时自行完成。

html:

<a class="navbar-item-link" "javascript:void(0)" >
    <div class="hamburger-icon"><span></span></div>
</a>

手写笔:

.hamburger-icon
    &:before, &.hamburger-icon span, &:after
    content ''
    display block
    height 2px
    width 20px
    background-size 100%
    background rgba(255,255,255,0.5)
    margin 6px auto 7px auto
    transition all 0.2s linear

    &:active
        &.hamburger-icon span
            background-color transparent
        &:before
            transform rotate(45deg)
            top -10px
            height 2px
            background rgba(255,255,255,0.5)
            width 30px
        &:after
            transform rotate(-45deg)
            bottom -10px
            height 2px
            background rgba(255,255,255,0.5)
            width 30px

:active 就像鼠标按下一样。当您释放点击时,动画将停止。

您有一些使用 JSCSS.

的解决方案

CSS 中,您可以使用 keyframes 来确保动画完成。

JS 中,您可以使用 click event 可以使用 JS 动画为您的图标添加动画效果,或者 添加 class 其中将包含您单击的属性。


以下示例使用 预处理器LESSSASS 在此处具有相同的语法:

.hamburger-icon {
    /* .hamburger-icon styles */
    &.active {
        span {
            background-color: transparent;
        }
        &:before {
            transform: rotate(45deg);
            top: -10px;
            height: 2px;
            background: rgba(255,255,255,0.5);
            width: 30px;
        }
        &:after {
            transform: rotate(-45deg);
            bottom: -10px;
            height: 2px;
            background: rgba(255,255,255,0.5);
            width: 30px;
        }
    }
}

然后在jQuery

$('.hamburger-icon').on('click', function(){
   $(this).addClass('active'); 
});

希望你明白了。

祝你好运'