Html 重新关注按钮

重新关注按钮

第一次单击时，会触发：焦点， 但在接下来的过程中没有点击，因为焦点保持静止。问题-如何使活动在每次点击时都有效

我的代码：

body{
文本对齐：居中；
利润率：50px0；
}
钮扣{
位置：相对位置；
边界：无；
大纲：无；
显示：内联块；
填充：16px 25px；
字体大小：20px；
背景#3F51B5；
颜色：#eee；
过渡：all.2s；
边界半径：3px；
盒影：0 1px 3px rgba（0,0,0,0.35）；
}
按钮：悬停{
盒影：0 1px 3px rgba（0,0,0,0.35），0 2px 7px rgba（0,0,0,0.2）；
}
按钮：焦点{
盒影：0 1px 1px rgba（0,0,0,0.5）；
动画：btn.7s易入易出；
}
@关键帧btn{
0% {
盒影：0 1px 3px rgba（0,0,0,0.35），0 0 rgba（63,81,181,0.3）；
}
100% {
盒影：0 1px 3px rgba（0,0,0,0.35），0 0 20px rgba（63,81,181,0）；
}
}

名称按钮

参见此处

只需一点JQ就可以添加和删除类

。动画

setTimeout
用于延迟在class
动画
和no class之间的切换（
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:

您可能需要java脚本或jQuery来完成此任务！！
$('button').click(function() {
var anim = $(this).addClass('animated');
setTimeout(function() {
     anim.removeClass('animated');
}, 700);
});