質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2111閲覧

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

around30

総合スコア5

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/07/24 04:32

###目的
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/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

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

下記のコードは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

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

2020/07/24 15:37

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

0

クリックのタイミングでループ時イベントを付けてそのイベント内で「止める」処理を入れてみてはいかがでしょう。

【Document: animationiteration イベント - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/animationiteration_event

【CSSアニメーションの開始時・終了時・ループ時にjavascriptで処理をする方法 | hirakublog ヒラクブログ】
https://hirakublog.com/code/303/

投稿2020/07/24 07:53

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

around30

2020/07/24 11:38

CSSアニメーションは実行回数を監視できたんですね。ありがとうございます。勉強になりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問