如何使用 Javascript 键盘事件触发 CSS Sprite 动画

Posted 2023-03-06

【中文标题】如何使用 Javascript 键盘事件触发 CSS Sprite 动画

【英文标题】：How to Trigger CSS Sprite Animation Using Javascript Keyboard Event [duplicate]

【发布时间】：2018-08-27 11:16:29

【问题描述】：

我有一个空 div 的闪烁精灵 css 动画。

#flashIt
	width: 50%;
	height: 100px;
	background: blue;
	margin: 10px auto;
	border: solid 2px black;
	left: 25%;
	animation: flash 1s linear infinite;
 
@keyframes flash 
		0%  opacity: 1; 
		50%  opacity: .1 
		100%  opacity: 1; 	
	
	

所以这个动画按原样工作。但是我希望动画在用户在键盘上按下一个键时开始。我怎样才能使用 JS 做到这一点？对此的帮助将不胜感激。谢谢

【参考方案1】：

一个简单的方法是监听按键，然后，当按键被按下时，将一个类应用于适当的 DOM 元素。此类将包含您的动画样式，然后按照您的需要为元素设置动画。

var elementToAnimate = document.findElementById("flashIt");
document.addEventListener('keypress', function(event) 
  elementToAnimate.classList.add('your-animation-class');
);

【参考方案2】：

这是你可以做的一个例子。

$(document).keypress('keypress',function(e)
      if(e.which==13)
         $('div').toggleClass('animation');
     
 );

这将在您按下回车键时激活动画类。

【讨论】：

虽然这可行，但 OP 从未说明他们是否使用 jQuery。

只是向他们展示了解决问题的另一种方法。对不起。

根本不是问题，只是想确保 OP 不会尝试实施您的解决方案并在它不起作用时感到困惑甚至卡住。 （假设他没有在幕后使用 jQuery）