Question

有一个输入字段和一个花哨的按钮。单击该按钮时会有一个很好的动画，并在列表中添加一个条目。当我通过输入字段中的回车键直接将条目添加到列表中时，我想按下刚刚按下的按钮动画。

[a link](https://jsbin.com/buqarovuqo/edit?html,css,js,console,output)

Answer 1

以下是一个解决方案：https://jsbin.com/jahaxodaja/1/edit?css,js,output

您可以为您的：active CSS规则添加一个类名，并有条件地将其应用于该按钮。

.button:active,
.button.active {
  ...
}

window.addEventListener("keydown", function (e) {  
  if (e.keyCode === 13) {  //checks whether the pressed key is "Enter"
    button.classList.add('active');
    input();
    setTimeout(function() {
      button.classList.remove('active');
    }, 100);
  }
});

在输入键上获得按下按钮的效果

1 个答案: