CSS 过渡和汉堡包转换 --> 点击 X（使用手写笔）

Question

我有一个用于移动断点的菜单汉堡包“图标”。我将它设置为 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

Answer 1

其:active行为就像鼠标按下一样。当您释放单击时，动画将停止。

您有一些使用JS或CSS 的解决方案。

在CSS中，您可以使用来keyframes确保您的动画将完成。

在JS中，您可以使用click eventJS 动画来为您的图标设置动画，或者添加一个包含您单击的属性的类。

以下示例使用预处理器。LESS或SASS在这里具有相同的语法：

.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'); 
});

希望你明白了。

祝你好运'