Question

我的游戏目标 - 获取汉堡包图标以显示点击过渡到十字架，然后再次点击以恢复其汉堡状态。

我不是CSS大师，而是通过广泛的谷歌搜索来管理它，以便在悬停和点击时进行转换（但会立即恢复）。

我正在努力实现我的目标，有人可以请我提供一些指示吗？

更新

根据要求，这是一个小提琴 - here 下面是处理转换的CSS的一部分，我尝试使用从JQuery切换以欺骗CSS，认为鼠标仍然被点击但无法使其工作，如果可能的话（假设是）这是实现我的目标的一种不明智的方法吗？

CSS

.burge:active span {
    background-color: rgba(0,0,0,0.0);
    transition-delay: .2s;
}
.burger:active span:before {
    background-color:#7dcc3d;
    transition-property: margin, transform;
    transition-duration: .3s;
    transition-delay: .3s, 0;
}
.burger:active span:before {
    margin-top: 0;
    transform: rotate(45deg);
    transition-delay: 0, .3s;
}
.burger:active span:after {
    background-color:#7dcc3d;
    transition-property: margin, transform;
    transition-duration: .3s;
    transition-delay: .3s, 0;
}
.burger:active span:after {
    margin-top: 0;
    transform: rotate(-45deg);
    transition-delay: 0, .3s;
}

Answer 1

如果你想在不使用JS的情况下这样做，那么你可以使用一个复选框。

以下是如何创建打开/关闭状态按钮的基本示例

＆＃13;

.burger + label {
  position: relative;
  
}
.burger + label:after {
  content: '☰'
}
.burger:checked + label:after {
  content: 'X'
}

＆＃13;

<input type="checkbox" id="checkbox1" class="burger"><label for="checkbox1"></label>

＆＃13;

Answer 2

您无法使用CSS检测到点击，因此这是一个重要的细节。基本上，将所有:active替换为类（例如.active）并在javascript中触发toggleClass（jQuery）：

.burger.active span {
    background-color: rgba(0,0,0,0.0);
    transition-delay: .2s;
}
.burger.active span:before {
    background-color:#7dcc3d;
    transition-property: margin, transform;
    transition-duration: .3s;
    transition-delay: .3s, 0;
}
.burger.active span:before {
    margin-top: 0;
    transform: rotate(45deg);
    transition-delay: 0, .3s;
}
.burger.active span:after {
    background-color:#7dcc3d;
    transition-property: margin, transform;
    transition-duration: .3s;
    transition-delay: .3s, 0;
}
.burger.active span:after {
    margin-top: 0;
    transform: rotate(-45deg);
    transition-delay: 0, .3s;
}

这里是jQuery：

$(".burger").click(function(event){ $(this).toggleClass("active"); });

或者是一些纯粹的JS：

var burgers = document.querySelectAll(".burger");
for(var i = 0; i < burgers.length; i++){
    burgers.item(i).addEventListener("click", function(){
        if(burger.className.indexOf("active").length){
            burger.className = burger.className.replace("active", "");
        } else {
            burger.className += " active";
        }
    }, false)
}

我知道toggleClass的快速而肮脏的实现在许多边缘情况下都不起作用，所以最好使用jQuery版本（纯JS版本会混淆一个名为'js-active'的类而只是离开类'js-'，打破代码。）

汉堡包点击激活css过渡

2 个答案: