时间戳

首页 > 解决方案 > 是否可以仅在单击按钮而不使用使用css或scss的javascript时触发动画

javascript - 是否可以仅在单击按钮而不使用使用css或scss的javascript时触发动画

问题描述

我只想在没有使用 CSS 或 scss 的 JavaScript 的情况下单击按钮时触发动画。

我尝试使用：active，但即使在页面加载后也会触发动画。

我认为 JavaScript 可以解决这个问题，但我想知道是否可以仅使用 css 或 scss 来解决它。

#clickMe:active{
  animation: rotateAnimation 2s linear;
}

@keyframes rotateAnimation {
  from{transform:rotate(0deg);}
  to{transform:rotate(365deg);}
}
<body>
  <button id="clickMe">Click Me</button>
</body>

标签： javascripthtmlcsssass

解决方案

您可以使用:focus来实现相同的功能。试试这个：

#clickMe:focus{
  animation: rotateAnimation 2s linear;
}

@keyframes rotateAnimation {
  from{transform:rotate(0deg);}
  to{transform:rotate(365deg);}
}
<body>
  <button id="clickMe">Click Me</button>
</body>

推荐阅读