javascript - CSS3过渡点击开始

我希望单击后开始CSS3过渡。

现在，如果将元素添加到带有jQuery的类（请参见span.toggle-nav.two），该类就知道该怎么做，就可以正常工作。

我已经尝试过使用: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的情况下进行？

最佳答案

为了让span成为焦点，您需要设置tabindex属性：

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

然后，您可能希望样式也设置CSS轮廓属性：

outline: none;

DEMO

关于javascript - CSS3过渡点击开始，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23429218/