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

Question

我有一个用于移动断点的菜单汉堡包 "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

Answer 1

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

您有一些使用 JS 或 CSS.

的解决方案

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

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

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

希望你明白了。

祝你好运'

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

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

css

animation

transition

transform

stylus