Question

重新关注按钮

首次点击时，触发器：焦点，但由于焦点仍然存在，因此在下面没有点击。问题 - 如何使每次点击都能使事件发挥作用？

我的代码：fiddle

＆＃13;

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

＆＃13;

<button>name button</button>

＆＃13;

我会很高兴得到任何帮助。谢谢

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

重新关注按钮

1 个答案: