html - 重新关注按钮

Question

重新关注按钮

当你第一次点击时，触发:focus,但由于焦点保持静止，因此在以下过程中没有点击。问题 - 如何使事件对每次点击都有效？

我的代码: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);
});