jquery - 通过 jQuery 激活 CSS 动画？

Question

我有一个红色方 block (DIV)，每次点击它时我都喜欢它使用 CSS 动画淡入和淡出。

<div id="BLOCK" style="background-color:red;width:150px;height:150px;">RED SQUARE</div>

<script>$('#BLOCK').click( function() {} );</script>

当我将动画挂到一个淡入淡出的类时，它会起作用:

<script>$('#BLOCK').click( function() { $('#BLOCK').addClass('fade'); } );</script>

但是，当我再次单击时，什么也没有发生，这很符合逻辑，因为该类已经添加了。但这不起作用。

<script>$('#BLOCK').click( function() { $('#BLOCK').removeClass('fade'); $('#BLOCK').addClass('fade'); } );</script>

有人知道更好的方法吗？

Answer 1

这里有一个关于添加和删除类的动画的快速示例。

http://jsfiddle.net/q8ew0a5b/6/

$( "#stop" ).click(function() {
  $( "#animated" ).addClass( "off" );
});
$( "#start" ).click(function() {
  $( "#animated" ).removeClass( "off" );
});

@keyframes grow {
	0% {
		width: 100px;
		height: 100px;
	}
	
	100% {
		width: 120px;
		height: 120px;
	}
}

#animated {
	width: 100px;
	height: 100px;
	background: silver;
	margin: 1em 0;
	animation: grow 1s infinite;
}

#animated.off {
	animation-name: none;	
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  <button id="stop">Stop</button>
  <button id="start">Start</button>
</p>
<div id="animated"></div>