回答編集履歴
1
リンク修正、説明追記
answer
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
アニメーション終了時に発生するイベント(animationend)がありますので、
|
|
3
3
|
そこでクラスを外すという方法もあります。
|
|
4
4
|
|
|
5
|
-
[
|
|
5
|
+
[HTMLElement: animationend イベント - Web API | MDN](https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/animationend_event)
|
|
6
6
|
|
|
7
7
|
```js
|
|
8
8
|
$('.start').click(function(){
|
|
@@ -13,4 +13,7 @@
|
|
|
13
13
|
});
|
|
14
14
|
```
|
|
15
15
|
|
|
16
|
-
アニメーションが終了する前にクリックしたときの動作が、setTimeout とは微妙に異なるので、お好みで選択すればいいでしょう。
|
|
16
|
+
アニメーションが終了する前にstartを再度クリックしたときの動作が、setTimeout とは微妙に異なるので、お好みで選択すればいいでしょう。
|
|
17
|
+
終了前にクリックしたときに、
|
|
18
|
+
setTimeout だと最初からアニメーションが始まる、
|
|
19
|
+
animationend だとそのまま終了まで続行する。
|