javascript - たとえば、ホバーではなくクリックイベントで遷移をアクティブにする方法はありますか?

Question

私の問題に対する非 JS ソリューションを見つけるのに苦労しています。:hover などではなく、クリック時に CSS トランジションを有効にする方法はありますか?

Answer 1

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;
}

ここにいくつかの良い例があります。