javascript - 有没有办法在点击事件而不是悬停时激活转换？

Question

我正在努力为我的问题找到一个非 JS 解决方案。有没有办法在点击而不是 :hover 或其他时激活 CSS 过渡？

Answer 1

一种可能性：您可以添加一个在单击时保存转换的类。这是一个使用 jQuery 的示例 - 您也可以仅使用“原始”JavaScript 以编程方式实现此目的：

应该动画的 HTML 容器

<div id="transtion"></div>

JavaScript

// bind click event to the element itself - but it can also be any other element that triggers this …
$('#transition').click(function() {
    // add the classname thats defined with the transition in your CSS
    $(this).addClass('translate_left');
});

Answer 2

点击也有伪类。但它的名字有些奇怪，通常只知道与 HTML 链接样式有关。

DIV.button:active {
   border-style: inset;
}

这是一个很好的例子。