Re-Fokussierung auf die Schaltfläche

Question

Re-Fokussierung auf die Schaltfläche

Wenn Sie zum ersten Mal geklickt, löst: Fokus, aber keine Klicks im folgenden als Fokus blieb. Frage - Wie lässt sich das Ereignis mit jedem Klick erledigen?

Mein Code: fiddle

body { 
 
    text-align: center; 
 
    margin: 50px 0 0; 
 
} 
 
button { 
 
    position: relative; 
 
    border: none; 
 
    outline: none; 
 
    display: inline-block; 
 
    padding: 16px 25px; 
 
    font-size: 20px; 
 
    background: #3F51B5; 
 
    color: #eee; 
 
    transition: all .2s; 
 
    border-radius: 3px; 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); 
 
} 
 

 
button:hover { 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 2px 7px rgba(0, 0, 0, 0.2); 
 
} 
 

 
button:focus { 
 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); 
 
    animation: btn .7s ease-in-out; 
 
} 
 

 
@keyframes btn { 
 
    0% { 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(63, 81, 181, 0.3); 
 
    } 
 
    100% { 
 
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35), 0 0 0 20px rgba(63, 81, 181, 0); 
 
    } 
 
}

<button>name button</button>

würde ich jede Hilfe freuen. Danke

Answer 1

siehe hier jsfiddle

es kann mit einem kleinen JQ getan werden, um hinzuzufügen und zu entfernen Klasse .animated

die setTimeout verwendet wird, um das Umschalten zwischen Klasse .animated und keine Klasse (700 Wert zu verzögern ist die Dauer Ihrer Animation

ich verwendete addClass und removeClass mit setTimeout statt toggleClass weil toggleClass mit hinzufügt und entfernt die Klasse sofort und die Animation hat keine Zeit

Code CSS zu laden:

.animated{ 
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); 
    animation: btn .7s ease-in-out; 

} 

JQ:

$('button').click(function() { 
var anim = $(this).addClass('animated'); 
setTimeout(function() { 
    anim.removeClass('animated'); 
}, 700); 
});