css - 重新专注于按钮

重新专注于按钮

首次点击时，会触发：焦点，
但在接下来的时间内没有点击，因为焦点仍然保持不变。问题-如何使活动与每次点击一起使用？

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

    

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

最佳答案

见这里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);
});