在纯CSS中通过元素点击触发动画

Question

假设我有一个简单的元素：

<a href="#" id="btn" onclick="return false">Click</a>

现在我可以通过点击使用:active来改变此元素的外观：

#btn:active {
    background: red;
}

但是我希望在点击后该元素能保持红色约一秒钟，而不修改HTML（因此无复选框技巧）或JavaScript。是否有可滥用的聪明技巧实现这一点？

这里是 JsFiddle

- Jan Jongboom

Answer 1

回答自己的问题。通过滥用:not伪类，我们可以在点击事件发生后触发动画：

回答自己的问题。通过滥用:not伪类，我们可以在点击事件发生后触发动画：

#btn:not(:active) {
    /* now keep red background for 1s */
    transition: background-color 1000ms step-end;
}

#btn:active {
    background: red;
}

- Jan Jongboom

---

我发现使用一点点 JS 可以使它变得更加有用，而不是使用 not(:active) 技巧，添加一个“fly”类来滑出页面 :-) http://jsfiddle.net/28Qfx/ - Louis Maddox

好的，但问题是如何在纯CSS中实现这一点。 - Jan Jongboom

是的，抱歉Jan，我只是想分享一下 :-o - Louis Maddox

非常有用的情况是，当你被分配为“垃圾桶”设计师的角色时，不允许触碰“酷”小伙子的JavaScript，但必须在按钮单击时触发动画。对于在不触及实现的情况下为日期选择器组件添加动画效果，这对我帮助很大。否则，我会像魔鬼一样避免使用这样的选择器，但如果你必须绕过它进行黑客攻击，则可以使用.uib-daypicker thead:not(:active) + tbody .btn { animation: FadeOutIn 1s linear; }。非常感谢。 - Florian

这唯一的缺点是效果只在元素首次生成时发生。有什么解决方法吗？ - Lukáš Řádek

Answer 2

您可以使用CSS3动画，并通过:focus和:active触发......
现在，您只需按下键即可激活效果......

但是，如果您需要使用鼠标单击....并在tag中，则需要将焦点设置为对象，因此需要一些javascript。(这种情况下为内联)

如果您可以使用另一个对象，比如，那么当您进行单击时，focus会自动设置，但在这种情况下，focus操作由浏览器提供。

所以，需要内联JS：

<a href="#" id="btn" onclick="this.focus();return false">Click</a>

以及CSS3代码

#btn {
    background: yellow;
}

#btn:focus, #btn:active {
    -webkit-animation: btn-color 1s forwards linear;
    -moz-animation: btn-color 1s forwards linear;
    -ms-animation: btn-color 1s forwards linear;
    -o-animation: btn-color 1s forwards linear;
    animation: btn-color 1s forwards linear;
}

@-webkit-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-moz-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-ms-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@-o-keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }
@keyframes btn-color { 0% { background: red; } 99% { background: red; } 100% { background: yellow; } }

查看一个可工作的示例更新：http://jsfiddle.net/s3G7p/1/

- gmo

---

是的，但这需要更改页面中的JavaScript以调用this.focus()，这是不可能的。 - Jan Jongboom

那么修改 JS 函数 呢？看看这个：http://jsfiddle.net/s3G7p/2/ （和你的类似，但在 return false; 之前加上了 this.focus();） - gmo

问题在于我无法控制用户代码，我只能更改CSS。return false已经存在 :-) - Jan Jongboom

CSS文件是Firefox OS中我们拥有的UX构建块共享库的一部分。其他应用程序使用此库，因此我无法更改它们所有的内容。 - Jan Jongboom

嗯...那就有点难了。还有一个问题，文件/样式是如何包含在文档中的？是内联的 <style>...</style> 还是外部引用的 <link rel="stylesheet" href="">？ - gmo