CSS transition and transform from hamburger bars --> 点击 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 中，您可以使用关键帧 来确保动画完成。

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

---

以下示例使用了预处理器。 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'); 
});

希望你明白了。

祝你好运