Question

我希望点击后启动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？

Answer 1

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

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

然后你也可以设置样式来设置CSS outline属性：

outline: none;

DEMO

Answer 2

您实际上可以使用纯CSS 执行此操作 - 在CSS中正确模拟点击事件的唯一方法是使用复选框伪造它，否则使用:active或:focus一旦元素失去焦点，就会停止任何应用的过渡或动画，而不是再次点击它时。

Demo Fiddle

HTML

<div>
    <input id='box' type='checkbox' />
    <label for='box'>Click Me!</label>
</div>

CSS

div {
    position:relative;
}
label {
    position:absolute;
    left:0;
    background:white;
}
input[type=checkbox] {
    opacity:0;
}
input[type=checkbox]:checked + label {
    -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);
    }
}

单击css3转换开始

2 个答案:

DEMO

Demo Fiddle