重新对焦按钮上的按钮</p> <p>

Question

重新对焦当你第一次点击，触发器：专注， 但下面为重点时没有点击保持不动。问题 - 如何让每次点击都能使用该事件？

我的代码：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>

我会很高兴的任何帮助。谢谢

Answer 1

看到这里jsfiddle

它可以用一个小JQ进行添加和删除类.animated

的setTimeout用来延迟.animated级和无级之间的切换（700值是你的动画的持续时间.7s）

我用addClass和removeClass与setTimeout，而不是toggleClass，因为使用toggleClass增加，并立即删除类和动画没有时间来加载

代码CSS：

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