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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

3回答

2555閲覧

ある要素のアニメーションが完了したときに別の要素のアニメーションを開始するには?

DrsriN

総合スコア11

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

2クリップ

投稿2021/01/25 05:04

編集2021/01/26 00:45

勾玉をクリックした後に扉を閉めたいです。

イメージ説明
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓勾玉をクリックで↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
イメージ説明
両サイドの扉が閉まる。

javascriptで#mtをクリック後勾玉が回転をします。
その後に.leftと.right(扉)をしめるようなアニメーションを付け足したいと考えています。
”javascriptクリック後に要素の移動”などを検索してみましたが、
アニメーションをひとつだけ付けることは書いてありますが、複数のアニメーショを付ける等の内容がなく想像で書いた、javascriptのコードは効きませんでした。

下にコードを記載していますが、どこかおかしな点等ありましたらお教えください。

html

1<!-- magatama --> 2 <div id="mt-box" ontouchstart=""> 3 <img src="img/magatama.png" usemap="#ImageMap" alt="" id="mt"> 4 <map name="ImageMap"> 5 <area href="javascript:b();" class="mt-green" shape="poly" coords="114,34,127,27,146,24,161,25,177,28,193,33,216,45,231,57,246,71,257,90,268,115,274,135,275,150,275,161,274,171,273,179,267,166,264,156,258,147,252,140,242,132,236,128,215,121,197,122,188,125,174,128,152,136,141,136,130,133,124,132,117,129,109,122,101,111,94,99,92,85,92,76,94,66,99,52,106,43,110,38,114,36,114,36" alt="" /> 6 <area href="javascript:b();" class="mt-yellow" shape="poly" coords="63,245,68,249,73,253,83,259,95,265,110,270,122,273,138,276,152,277,161,277,173,275,184,273,202,267,214,260,225,253,232,245,243,237,249,230,257,217,261,210,266,196,268,185,265,168,262,159,257,152,252,146,240,137,230,132,216,129,203,128,195,130,186,132,176,138,171,142,167,148,162,154,159,161,156,170,154,181,152,189,149,199,147,206,144,214,141,221,133,230,128,234,120,239,112,243,99,247,92,247,81,247,74,246,69,246,64,244,83,247" alt="黄色" /> 7 <area href="javascript:a();" class="mt-red" shape="poly" coords="106,34,98,35,91,38,85,41,79,45,75,48,69,53,63,57,61,59,57,62,52,71,47,76,45,78,36,92,34,101,32,104,28,116,25,125,24,136,22,149,23,160,24,167,25,177,27,184,28,189,32,201,37,211,40,216,44,224,48,227,54,232,61,236,67,238,78,241,90,242,102,241,109,238,114,235,119,232,123,229,126,226,132,221,136,215,141,207,144,198,144,192,146,187,144,176,145,203,146,184,143,170,139,164,137,159,130,149,123,142,119,140,111,132,108,129,105,125,96,117,92,109,89,99,87,86,89,70,90,63,92,58,93,54,96,49,98,44,101,41,104,36,104,36" alt="" /> 8 </map> 9 </div> 10 11 <p class='navT'>勾玉をクリックしてください。</p> 12 13 <!-- door --> 14 <div href="javascript:cL();" class="left"></div> 15 <div href="javascript:cR();" class="right"></div>

css

1/* magatama */ 2#mt-box{ 3 height: 25%; 4 text-align: center; 5 position: absolute; 6 top: 20%; 7 animation: fluffy 3s ease 1s infinite alternate; 8} 9@keyframes fluffy{ 10 0% { transform:translateY(-5px) } 11 100% { transform:translateY(5px) } 12} 13@keyframes clockwise { 14 0%{ transform:rotate(0);} 15 100%{ transform:rotate(360deg); } 16} 17@keyframes counter { 18 0%{ transform:rotate(0);} 19 100%{ transform:rotate(-360deg); } 20} 21#mt{ 22 height: 100%; 23 outline: none; 24} 25/* door */ 26.left{ 27 border: solid 10px #000; 28 height: 100vh; 29 max-width: 75vh; 30 width: 50vw; 31 position: absolute; 32 left: 0%; 33 background-color: rgb(255, 251, 240); 34 pointer-events: none; 35 transition: .5s; 36 transition-delay: .5s; 37} 38.right{ 39 border: solid 10px #000; 40 height: 100vh; 41 max-width: 75vh; 42 width: 50vw; 43 position: absolute; 44 top: 0; 45 right: 0; 46 background-color: rgb(255, 251, 240); 47 pointer-events: none; 48 transition: .5s; 49 transition-delay: .5s; 50} 51.content:hover .left{ 52 transform: translateX(-70%); 53} 54.content:hover .right{ 55 transform: translateX(70%); 56} 57@keyframes closeL { 58 0%{ transform:translateX(-70%);} 59 100%{ transform:translateX(0%);} 60} 61@keyframes closeR { 62 0%{ transform:translateX(70%);} 63 100%{ transform:translateX(0%);} 64}

javascropt

1const a = () => { 2 document.querySelector('#mt').style.animation='1.5s ease clockwise'; 3 }; 4 5 const b = () => { 6 document.querySelector('#mt').style.animation='1.5s ease counter'; 7 } 8 9 document.querySelector('#mt').addEventListener('animationend', () => { 10 location.href = href=""; 11 }); 12 13 const cL = () => { 14 document.querySelector('.left').style.animation='1.5s closeL'; 15 }; 16 17 const cR = () => { 18 document.querySelector('.right').style.animation='1.5s closeR'; 19 };

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

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

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

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

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

m.ts10806

2021/01/25 05:14

タイトルに要件がなくタグで表現できる内容しかありません。要件を記載してください。 あと、「後に」といっても、ひとつひとつイベントを書いていくことになるのではないでしょうか。
DrsriN

2021/01/25 06:03

コメントありがとうございます。 要件は勾玉をクリックしたら両サイドの扉が閉まるようにしたいです。 なるほど、ひとつひとつ書く場合jsはどのように書けば良いのでしょうか?
m.ts10806

2021/01/25 06:06

「質問への追記修正依頼」です。 質問に追記して返してください。 >どのように書けば 調べて何も出なかったらその旨追記してください。何を調べて何を試したか
DrsriN

2021/01/25 06:09

すみません、要件に関しましては、質問内に書いてあります。 調べても良く分からなかったので質問させていただきました。 調べながらjsのコードを書きましたが動きませんでした。
m.ts10806

2021/01/25 06:18

ですからタイトル。 ガイドラインにも「タイトルには要件を書こう」とあります。中身が何もないタイトルはマナー違反ですよ。 今後もJavascript関係だと同じタイトルにしますか?たぶんそのうち誰も読まなくなります。 タイトルで端的に要件伝えてください
m.ts10806

2021/01/25 06:20 編集

調べて何も出なかったらその旨追記してください。何を調べて何を試したか 書いてないと、「既に見た」なんて後出しが起きるので、出典として記載必要です。 もっと言えば、何もわからないなら「動くコードそのまま」でないと解決しない可能性があります。それはもはや作業依頼です。 ついた回答を理解できるくらいの知見は必要です(コピペツギハギのままだとずっと作業依頼になる)
DrsriN

2021/01/25 06:25

了解しました。質問の内容を改めて、記載させていただきます。 この度は質問内容不足で申し訳ありませんでした。
int32_t

2021/01/25 06:51

クリックしたら閉まるのなら、href="javascript:b();" とか href="javascript:a();" を href="javascript:cL();cR();" に変えれば済むのでは。そういう意図ではないですか?
DrsriN

2021/01/25 06:58

コメントありがとうございます。 私もそのように考えており、cssとjavascriptにも追加でコード(.closeRと.closeLタグ)書きましたが、反応がありませんでした...
int32_t

2021/01/25 07:00

<area> の href ですよ。<div> に href 属性はありません。
Lhankor_Mhy

2021/01/25 07:34

ああ、質問の編集がされていたのですね。了解しました。
int32_t

2021/01/25 07:41

なるほど。では適切なタイトルは「ある要素のアニメーションが完了したときに別の要素のアニメーションを開始するには?」あたりでしょうね。
DrsriN

2021/01/26 00:44

返信遅れて申し訳ありません。 hoverで扉開く→勾玉をクリック→勾玉回転→扉閉まる を実現させたく考えております。 なるほど。では適切なタイトルは...>>> そちらの方が良いようですね!変更させていただきます。 ありがとうございます。
guest

回答3

0

描画領域がきまっていてアニメーション機能をもつsvgなどで処理すればよいでしょう

投稿2021/01/25 05:07

yambejp

総合スコア114572

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

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

DrsriN

2021/01/25 06:07

コメントありがとうございます。 まず最初に、マウスイベントで扉が開くようになっており、 そこに追加で勾玉クリック時に扉をしめるようなアニメーションを付けたいのですが、jsでやる方法はないでしょうか?
yambejp

2021/01/25 08:25

適当ですが確認してみて下さい <script> window.addEventListener('DOMContentLoaded', ()=>{ document.querySelector('#c1').addEventListener('click',()=>{ document.querySelector('#a1').beginElement(); document.querySelector('#a2').beginElement(); }); }); </script> <svg width="400" height="300"> <rect fill="red" width="400" height="300" /> <circle fill="yellow" cx="200" cy="150" r="50" id="c1" /> <rect fill="white" x="-149" y="1" width="198" height="298" stroke="black" stroke-width="2" id="r1"> <animate attributeType="XML" attributeName="x" dur="1s" to="1" fill="freeze" begin="" id="a1" /> </rect> <rect fill="white" x="351" y="1" width="198" height="298" stroke="black" stroke-width="2" id="r2"> <animate attributeType="XML" attributeName="x" dur="1s" to="201" fill="freeze" begin="" id="a2" /> </rect> </animate> </svg>
yambejp

2021/01/25 08:37

最初からアニメーションを仕掛けておいて、特定のトリガーで 起動するというのが楽だと思います
DrsriN

2021/01/26 02:32

実行してみたところ、正常に動きました。 ですが、私の説明不足でご指摘をいただき、 タイトルを変更させていただきました。 こちらのコードから順序を例えると 両サイドのrect要素が最初にhoverで開く→ circle(※イメージマップ でリンクが入ってます。)をクリックすると回転→ 両サイドのrect要素が閉まる→ リンクへ飛ぶの順序で実行したく考えております。
yambejp

2021/01/26 02:39

まぁ簡易的に書いたのでrectやcircleを使っていますが 実際にimageタグで画像を指定することができます イメージマップはpathで処理すればよいでしょう。 回転とふすまがしまるのの関連がよくわかりません 回転は何秒かでとまるのでしょうか?それともなにか バックグラウンドで読み込みみたいなものが終わるまで止まらないのでしょうか? 止まってから閉めないといけないのでしょうか?
yambejp

2021/01/26 02:42

int32_tさん補足ありがとうございます svgアニメについてはcssに移行は微妙なんですよね・・・・ 結局ツールで作ると要素とデザインの分離が難しいので・・・ だからブラウザ側もいつまでたっても互換してるんだと思います
DrsriN

2021/01/26 03:33

クリックすると1.5秒間回転します。 回転を終えた後に襖を自動で閉めるようなアニメーションを付けたいです。 止まってから閉めたいと考えております。
yambejp

2021/01/26 03:42

念の為、回転は1.5秒かけて1回転するのでしょうか? それとも高速回転して1.5秒で止まるのでしょうか?
DrsriN

2021/01/26 04:03

1.5秒かけて1回転します!
yambejp

2021/01/26 04:07

1,5秒1回転バージョンに更新しておきました
DrsriN

2021/01/26 04:29

おお!動作完璧です! この三つの玉にはそれぞれ別々のリンクを貼る場合は作っていただいたコードの後に document.querySelector('#c2').addEventListener('animationend', () => { location.href = href="works.html"; などと書けば良いでしょうか?
yambejp

2021/01/26 05:13

時間調整はご自身で調整が必要ですが、処理的にはご提示のような感じでよいでしょう codepenから外部には飛べないようですが、codepen書き換えておきました。
DrsriN

2021/01/26 05:45

了解しました!一連の動作ができましたのでベストアンサーに選ばせていただきます!ありがとうございました。
DrsriN

2021/01/26 06:01

すみません、大変申し訳ありませんが、SVGを使用するとwebサイトが大変重たくなってしまいます。。。 私が書いたjsのコード(手直しが必要ですが...) const a = () => { document.querySelector('#mt').style.animation='1.5s ease clockwise'; }; const b = () => { document.querySelector('#mt').style.animation='1.5s ease counter'; } const cL = () => { document.querySelector('.left').style.animation='1.5s closeL'; }; const cR = () => { document.querySelector('.right').style.animation='1.5s closeR'; }; document.querySelector('#mt').addEventListener('animationend', () => { cL(); cR(); }); document.querySelector('#mt').addEventListener('animationend', () => { location.href = href="works.html"; }); これを用いて同じような動作は不可能でしょうか?
guest

0

ベストアンサー

アニメーションを2つ終えてさらに処理をするのが目的だったのですね。

現在のコードを尊重するとこんな感じでしょう。

javascript

1const a = () => { 2 document.querySelector('#mt').style.animation='1.5s ease clockwise'; 3 document.querySelector('#mt').addEventListener('animationend', closeDoors); 4}; 5 6const b = () => { 7 document.querySelector('#mt').style.animation='1.5s ease counter'; 8 document.querySelector('#mt').addEventListener('animationend', closeDoors); 9} 10 11const closeDoors = () => { 12 document.querySelector('.right').style.animation = '1.5s closeR'; 13 document.querySelector('.left').style.animation = '1.5s closeL'; 14 document.querySelector('.left').addEventListener('animationend', () => { 15 location.href = ... をここで実行; 16 }); 17};

深読みして、クリックされる<area>によって遷移先が変わるなら、いっそasyncにしたほうが楽でしょう。

html

1 <area href="javascript:navigate('counter', 'url-1');" ... /> 2 <area href="javascript:navigate('counter', 'url-2');" ... /> 3 <area href="javascript:navigate('clockwise', 'url-3');" ... />

javascript

1function animatePromise(element, animation) { 2 return new Promise((resolve, reject) => { 3 element.style.animation = animation; 4 element.addEventListener('animationend', resolve, {once:true}); 5 }); 6} 7 8async function navigate(direction, url) { 9 await animatePromise(document.querySelector('#mt'), '1.5s ease ' + direction); 10 11 document.querySelector('.right').style.animation = '1.5s closeR'; 12 await animatePromise(document.querySelector('.left'), '1.5s closeL'); 13 14 location.href = url; 15}

投稿2021/01/26 06:50

編集2021/01/26 07:09
int32_t

総合スコア20659

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

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

DrsriN

2021/01/26 07:05

コメントありがとうございます! 助かりました。問題なく実行することができました!
guest

0

アニメーションを終えてから何かをするには、animationendイベントを拾うのがいいでしょう。

js

1document.querySelector('#mt').addEventListener('animationend', () => { 2 // たとえば 3 cL(); 4 cR(); 5});

簡単にやるのであれば、animation-delay で、アニメーション開始タイミングを調節する、というのもいいかと思います。
animation-delay - CSS: カスケーディングスタイルシート | MDN

投稿2021/01/25 07:36

編集2021/01/25 07:39
Lhankor_Mhy

総合スコア35860

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

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

DrsriN

2021/01/26 02:24

前回に引き続き、コメントありがとうございます! こちら実際に参考にさせていただいて書いたjsのコードなのですが、 const a = () => { document.querySelector('#mt').style.animation='1.5s ease clockwise'; }; const b = () => { document.querySelector('#mt').style.animation='1.5s ease counter'; } document.querySelector('#mt').addEventListener('animationend', () => { location.href = href=""; }); const cL = () => { document.querySelector('.left').style.animation='1.5s closeL'; }; const cR = () => { document.querySelector('.right').style.animation='1.5s closeR'; }; document.querySelector('#mt').addEventListener('animationend', () => { cL(); cR(); }); 現在、勾玉をクリック→ 勾玉回転→ document.querySelector('#mt').addEventListener('animationend', () => { location.href = href=""; });を実行。 の順番になっていて、両サイドのドアが閉まらない状況です。 #mtに対して二つのanimationendを付けているように見えるのですが、 何か実行の順番を指定するようなコードなどがあるのでしょうか?
Lhankor_Mhy

2021/01/26 02:35

JavaScriptはそのページでしか動作しません。ページが移動すると、前のページのスクリプトは全て破棄されて新規ページへ影響することはありません。
Lhankor_Mhy

2021/01/26 03:13

わかりにくい説明だったかもしれません。 イベントリスナは、原則的には登録された順番で処理されます。が、ひとつ目のアニメーションが開始した直後にふたつ目のページ移動が起き、ページ移動後では前のページのスクリプトは影響しないので、アニメーションをほとんど見ることができない状態、ということです。 つまり、ページ移動をするイベントリスナを変更する必要があります。
DrsriN

2021/01/26 03:35

なるほどなるほど!理解しました! それを踏まえて書いてみます! あと、このjsコードの書き方は問題なさそうでしょうか?
Lhankor_Mhy

2021/01/26 04:14

location.href = href=""; これに何の意味があるのかよくわからないのですが、仮のコードなんでしょうか?
DrsriN

2021/01/26 04:30

location.href = href="";はこのアニメーションが一通り終わったら、別のページ(html)の飛ぶような仕様にしたいと考えております。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問