14

単純な要素があるとしましょう:

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

これで、クリック時にこの要素の外観を次のように変更できます:active。

#btn:active {
    background: red;
}

ただし、HTML (チェックボックスのハックなし) または JavaScript を変更せずに、要素をクリックした後、要素が約 1 秒間赤いままになることを望みます。これを悪用できる賢いトリックはありますか？

JsFiddleはこちら

4

2 に答える 2

42

私自身の質問に答えます。疑似クラスを悪用する:notことで、onclick が発生した後にアニメーションをトリガーできます。

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

#btn:active {
    background: red;
}
于 2013-08-22T09:45:32.587 に答える
3

&を使用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>

そして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/

于 2013-08-22T10:19:05.227 に答える