cssアニメーションで「ラスト一回だけ実行」してほしい

###目的
CSSでローディング中を示すアニメーションを実装しています。
「stop」をクリックしたときに「ラスト一回だけ実行」させたいです。

###コード
概要は以下です。
コメントアウトのloaderがアニメーションとなります。

html
1<div class="wrapper">
2  <button type="button" class="start">start</button>
3  <button type="button" class="stop">stop</button>
4  <div class="outer">
5    <!-- <div class="loader"></div> -->
6  </div>
7</div>

CSSは以下となっています。

css
1.wrapper {
2    background: black;
3    position: relative;
4    width: 100vw;
5    height: 100vh;
6}
7.outer {
8    width: 100%;
9    height: 100vh;
10    position: absolute;
11    overflow: hidden;
12}
13.loader {
14    height: 100%;
15    width: 100%;
16    position: absolute;
17    left: -100%;
18    background-color: rgba(255,255,255,0.2); 
19    animation: loader 3s ease 0s infinite;
20}
21@keyframes loader {
22  0% { transform: translateX(0px);}
23  100% { transform: translateX(200%); }
24}

そしてstartで上記コメントアウトにloaderが入ります。

jQuery
1$('.start').click(function(){
2	$('.outer').prepend('<div class="loader"><div>');
3});

###試したこと
上でstopをクリックしたときに、「ラスト一回だけ実行」させたいので、プロパティを調べてそれっぽいものを使ってみました。

まず「終了の状態を維持する」というanimation-fill-modeですが、以下forwardsでできませんでした。

jQuery
1$('.stop').click(function(){
2	$('.loader').css('animation-fill-mode','forwards');
3});

次「無限に繰り返すことをやめる」ためにanimation-iteration-countを0にしてもできず、パッと消えてしまいます。

jQuery
1$('.stop').click(function(){
2	$('.loader').css('animation-iteration-count',0);
3});

最後に「停止」はどうかと思ったのですがやはり一時停止するだけでした。

jQuery
1$('.stop').click(function(){
2	$('.loader').css('animation-play-state','paused');
3});

「ラスト一回だけ実行」に適切なプロパティはないのでしょうか？
もしできる方法がありましたら宜しくお願い致します。

■実行サンプル
https://jsfiddle.net/eg71ktnz/

行動規範の内容に同意します

回答2件

ベストアンサー

作成してみました。
空のHTMLファイルにペーストしたら動くようになっています。

ちょっとわからなかったことが、あります。
「stop」をクリックしたときに「ラスト一回だけ実行」させたいです。
と書かれていますが、

1.クリックしたときに実行中のアニメがラスト一回になるのか。
2.クリックしたときに実行中のアニメが終わった後のラスト一回を指すのかが
1なのか2なのかがわかりませんでした。

下記のコードは２で作成してあります。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <title>test</title>
6    <style>
7        body {
8            overflow: hidden;
9            margin: 0;
10        }
11
12        .wrapper {
13            background: black;
14            position: relative;
15            width: 100vw;
16            height: 100vh;
17        }
18
19        .outer {
20            width: 100%;
21            height: 100vh;
22            position: absolute;
23            overflow: hidden;
24        }
25
26        .loader {
27            height: 100%;
28            width: 100%;
29            position: absolute;
30            left: -100%;
31            background-color: rgba(255, 255, 255, 0.2);
32            animation: loader 3s ease none;
33        }
34
35        @keyframes loader {
36            0% {
37                transform: translateX(0px);
38            }
39
40            100% {
41                transform: translateX(200%);
42            }
43        }
44    </style>
45</head>
46
47<body>
48    <div class="wrapper">
49        <button type="button" class="start">start</button>
50        <button type="button" class="stop">stop</button>
51        <div class="outer">
52            <div id="anime"></div>
53        </div>
54    </div>
55    <script>
56
57
58        const startBtn = document.getElementsByClassName("start")[0];
59        const stopBtn = document.getElementsByClassName("stop")[0];
60        const anime = document.getElementById("anime");
61
62        // startをclick
63        startBtn.addEventListener("click", () => {
64            const outer = document.getElementsByClassName("outer")[0];
65            if (outer.childElementCount == 0) {
66                const div = document.createElement('div');
67                div.id = "anime";
68                div.className = "loader";
69                outer.appendChild(div);
70            }
71            loopStart();
72        })
73
74
75        const loopStart = () => {
76            const anime = document.getElementById("anime");
77            anime.classList.add("loader");
78            anime.addEventListener("animationend", () => {
79                anime.classList.remove("loader");
80                setTimeout(loopStart, 0);
81            })
82        }
83
84
85        // クリックしたときに実行中のアニメがラスト一回であるならば
86        // 下記のコードをコメントアウトして、下の二つを削除
87
88        // stopBtn.addEventListener("click", () => {
89        //     const anime = document.getElementById("anime");
90        //     anime.addEventListener("animationend", () => {
91        //         anime.remove();
92        //     })
93        // })
94
95        stopBtn.addEventListener("click", () => {
96            const anime = document.getElementById("anime");
97            anime.addEventListener("animationend", () => {
98                reset();
99            })
100        })
101
102        const reset = () => {
103            const anime = document.getElementById("anime");
104            anime.addEventListener("animationend", () => {
105                anime.remove();
106            })
107        }
108
109    </script>
110</body>
111
112</html>
113

投稿2020/07/24 10:31

Jon_do

総合スコア1373

around30

2020/07/24 11:37

クオリティに焦りました。２パターンまでありがとうございます。文句なしのベストアンサーです。 anime.remove(); について質問よろしいでしょうか？ animeがアニメーションしている要素で、それをremove()しているのに、なぜパッとremove()しないで平気なのでしょうか？たとえば $('.stop').click(function(){ $('.loader').remove(); }); ですと、パッとremove()してしまうのに、不思議です。

Jon_do

2020/07/24 12:03

上で紹介されているページにもあるanimationendイベントを使っています。 https://developer.mozilla.org/ja/docs/Web/API/Document/animationend_event これを使うことでアニメーションが終わった時に処理が可能になるので、完全に隠れた後に削除されています。

around30

2020/07/24 15:37

なるほどでした。ありがとうございます。

行動規範の内容に同意します