単純な要素があるとしましょう:
<a href="#" id="btn" onclick="return false">Click</a>
これで、クリック時にこの要素の外観を次のように変更できます:active。
#btn:active {
background: red;
}
ただし、HTML (チェックボックスのハックなし) または JavaScript を変更せずに、要素をクリックした後、要素が約 1 秒間赤いままになることを望みます。これを悪用できる賢いトリックはありますか？
私自身の質問に答えます。疑似クラスを悪用する:notことで、onclick が発生した後にアニメーションをトリガーできます。
#btn:not(:active) {
/* now keep red background for 1s */
transition: background-color 1000ms step-end;
}
#btn:active {
background: red;
}
&を使用CSS3 animationsしてトリガーすることができます...これで、キー
を押すだけで効果をアクティブにできます...:focus:active
TAB
mouse clickしかし、それを.... でアクティブにするa tag必要があり、オブジェクトにフォーカスを設定する必要がある場合は、いくつかjavascriptが必要です。(この場合はインライン)
別のオブジェクトを使用できる場合は、を実行input type="text"するfocusと自動的に設定されますclickが、この場合focusはブラウザによって指定されたアクションです。
したがって、必要なインライン JS は次のとおりです。
<a href="#" id="btn" onclick="this.focus();return false">Click</a>
#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; } }