実現したいこと
フェードインと書いてあるボタンを押すと画像がフェードアウトする
またボタンを押すと画像がフェードインする
前提
今の状態ではボタンを押すと画像がフェードアウトしますが、
再度ボタンを押すと最初と同じように画像が出てきてフェードアウトしていきます。
発生している問題・エラーメッセージ
最初は出ていませんが、ボタンを押し、フェードアウトした後にclassList(item.animate(keyframes,options));の部分にエラーが起こります。
エラーメッセージ Uncaught TypeError: document.body.classList is not a function at HTMLButtonElement.<anonymous> (index.html:32:27) ### 該当のソースコード <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>lesson03 アニメーション2</title> <link rel="stylesheet" type="text/css" href="base.css"> </head> <body> <div id="wrapper"> <div class="box"> <button id="button" type="submit">フェードアウト</button> <img id="image" src="./images/outsourcing.jpg" alt="サンプル画像"> </div> </div><!-- wrapper --> <script> const button=document.querySelector('#button'); const item=document.querySelector('#image'); const keyframes={ opacity:[1,0], }; const options={ duration:1000, fill:'forwards', }; button.addEventListener('click',()=>{ document.body.classList(item.animate(keyframes,options)); item.animate,toggle(keyframes,options); }); </script> </body> </html> ### 試したこと toggleをanimateの後ろに入れてみたのですが、ちゃんと操作ができておらず効いてない状態です ここに問題に対して試したことを記載してください。 ### 補足情報（FW/ツールのバージョンなど） まだ勉強を始めたばかりなので細かく内容が理解できておらず、知っている知識をつめこんだ結果こうなってしまいました。 どう改善すればいいかがわかりませんでした。 何を加えればいいのかをご教授ください
0 コメント