javascript - css3 过渡开始点击

Question

我希望在点击后开始 CSS3 过渡。

现在，如果元素被添加一个带有 jQ​​uery 的类(参见 span.toggle-nav.two)，它就可以正常工作了，jQuery 知道接下来要做什么。

我尝试过使用 :focus(请参阅 span.toggle-nav.one)，但这不起作用。如果没有 jQuery，我如何让它工作？

请看这里:http://jsfiddle.net/aE4C7/单击 Two 有效，但单击 One 无效。

<span class="toggle-nav one">One</span>
<span class="toggle-nav two">Two</span>

<script type="text/javascript">
     $('.toggle-nav.two').on('click',function(){
        $(this).addClass("click");
    });
</script>

<style type="text/css">
.toggle-nav {
    background-image:url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS8hRiDDs6RJRzelpuFRX2wG5Wx2cQPOBWKYCOmlA2Wr34dx1vv);
    background-repeat:no-repeat;
    width:50px;height:50px;
    display:inline-block;
}
.toggle-nav.one:focus {
    -webkit-animation: spin 0.6s infinite linear;
    -moz-animation: spin 0.6s infinite linear;
    -o-animation: spin 0.6s infinite linear;
    -ms-animation: spin 0.6s infinite linear;
}
.toggle-nav.two.click {
    -webkit-animation: spin 0.6s infinite linear;
    -moz-animation: spin 0.6s infinite linear;
    -o-animation: spin 0.6s infinite linear;
    -ms-animation: spin 0.6s infinite linear;    
}


@-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg);}
    100% { -webkit-transform: rotate(180deg);}
}
@-moz-keyframes spin {
    0% { -moz-transform: rotate(0deg);}
    100% { -moz-transform: rotate(180deg);}
}
@-o-keyframes spin {
    0% { -o-transform: rotate(0deg);}
    100% { -o-transform: rotate(180deg);}
}
@-ms-keyframes spin {
    0% { -ms-transform: rotate(0deg);}
    100% { -ms-transform: rotate(180deg);}
}
</style>

有没有办法在没有 jQuery 的情况下完成这项工作？

Answer 1

要让span获得焦点，需要设置tabindex属性:

<span class="toggle-nav one" tabindex="-1">One</span>

然后你可能希望样式也设置 CSS outline 属性:

大纲:无；

DEMO