JavaScript フェードイン

実現したいこと

フェードアウトというボタンを押すと、画像が１秒間かけて消えて、フェードアウトのボタンがフェードインのボタンに切り替わり、フェードインのボタンをクリックすると、画像が１秒かけて表示される仕組みを作りたいです。

前提

アニメーションをCSSのtransitionを使用せずにJavaScriptのopacityを用いて、作りたいです。
fade Animation関数を用いようと考えています。

発生している問題・エラーメッセージ

まだJavaScriptの知識が浅はかなので、素人でもわかるようにご教授いただけると幸いです。

該当のソースコード

html
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>lesson03 アニメーション2</title>
6    <link rel="stylesheet" type="text/css" href="base.css">
7</head>
8<body>
9    <div id="wrapper">
10        <div class="box">
11            <button id="button" type="submit">フェードアウト</button>
12            <img id="image" src="./images/outsourcing.jpg" alt="サンプル画像">
13        </div>
14    </div><!-- wrapper -->
15
16    <script>
17        const targettargetElement = document.getElementById("button");
18        function fadeAnimation() {
19        targettargetElement.style.transition = "opacity 1s";
20        let sw = 0 //
21        }
22        function fadeSwitch(){
23        if(sw == 1){
24        fadeIn();
25        sw = 0;
26}
27        else if(sw == 0){
28        fadeOut();
29        sw = 1;
30}
31}
32        function fadeIn() {
33        targettargetElement.style.transition = "opacity 2s"; // 1
34        targettargetElement.style.opacity = "1"; // 1
35}
36        function fadeOut() {
37        targettargetElement.style.opacity = "0"; // 1
38}
39// setInterval fadeSwitch 2
40setInterval(fadeSwitch, 2000);
41        
42    </script>
43</body>
44</html>

css
1@charset "UTF-8";
2/* reset */
3body, h1, h2, h3, h4, h5, h6, p, address,
4ul, ol, li, dl, dt, dd, img, form, table, tr, th, td {
5    margin: 0;
6    padding: 0;
7    border: none;
8    font-style: normal;
9    font-weight: normal;
10    font-size: 100%;
11    text-align: left;
12    list-style-type: none;
13    border-collapse: collapse;
14}
15
16textarea { font-size: 100%; vertical-align:middle;}
17img { border-style: none; display: block; }
18hr { display: none; }
19em{font-style: normal}
20input{line-height:auto;vertical-align:middle;}
21strong.more{color:#c30}
22a{text-decoration: none;}
23
24html {
25
26}
27
28body {
29    font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
30}
31
32* {
33    -webkit-box-sizing: border-box;
34    -moz-box-sizing: border-box;
35    -o-box-sizing: border-box;
36    -ms-box-sizing: border-box;
37    box-sizing: border-box;
38}
39
40/* 上の部分は気にせずここから書く */
41#wrapper {
42    height: 100vh;
43    display: flex;
44    justify-content: center;
45    align-items: center;
46}
47
48.box {
49    display: flex;
50    flex-direction: column;
51}
52
53#button {
54    width: 200px;
55    height: 60px;
56    background-color: #fdd;
57    border: none;
58    margin: 0 auto 20px;
59    cursor: pointer;
60}
61
62#image {
63    width: 300px;
64    opacity: 1;
65}
66

試したこと

Chromeでopacity　　JavaScriptについて調べ、コードを打ってみたりしたが、反応せず、困っています。

Shinnosuke0128

2023/12/24 08:32

試したコードを記載させていただきました。ご確認お願いします。

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

回答2件

アニメーションはCSSに任せるほうが処理も簡潔で軽くなると思いますが・・・

javascript
1<script>
2document.addEventListener('click',({target})=>{
3  const duration=1000;
4  if(target.matches('#btn1')){
5    const d=new Date();
6    const flg=getComputedStyle(img1).getPropertyValue("opacity")==="0";
7    const timerId=setInterval(()=>{
8      const diff=new Date()-d;
9      img1.style.opacity=flg?(diff/duration):(1-diff/duration);
10      if(diff>duration){
11        clearInterval(timerId);
12        img1.style.opacity=flg?1:0;
13        target.textContent=flg?"フェードアウト":"フェードイン";
14      }
15    });
16  }
17  if(target.matches('#btn2')){
18    const flg=getComputedStyle(img2).getPropertyValue("opacity")==="0";
19    const fill=flg?"backwards":"forwards";
20    const player=new Animation(new KeyframeEffect(img2,[{opacity:1},{opacity:0}],{duration,fill}),document.timeline);
21    flg?player.reverse():player.play();
22    (async ()=>{
23      await player.finished;
24      target.textContent=flg?"フェードアウト":"フェードイン";
25    })();
26  }
27});
28</script>
29<div id="wrapper">
30<div class="box">
31<button id="btn1" type="button">フェードアウト</button>
32<img id="img1" src="./images/outsourcing.jpg" alt="サンプル画像1">
33</div>
34</div>
35<div id="wrapper">
36<div class="box">
37<button id="btn2" type="button">フェードアウト</button>
38<img id="img2" src="./images/outsourcing.jpg" alt="サンプル画像2">
39</div>
40</div>

投稿2023/12/25 04:30

yambejp

総合スコア117967

[2023/12/23 14:06 時点の質問（コードが追記される前）の内容に対する回答]
たとえば下記のようになります。

js
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="UTF-8">
5    <title>lesson03 アニメーション2</title>
6    <link rel="stylesheet" type="text/css" href="base.css">
7</head>
8<body>
9    <div id="wrapper">
10        <div class="box">
11            <button id="button" type="button">フェードアウト</button>　　
12            <img id="image" src="./images/outsourcing.jpg" alt="サンプル画像">
13        </div>
14    </div><!-- wrapper -->
15    <script>
16        const button = document.getElementById('button');
17        const image = document.getElementById('image');
18        let isFadeOut = true;
19        let intervalId;
20
21        window.addEventListener('beforeunload', (e) => {
22            if (intervalId !== undefined)  clearInterval(intervalId);
23        });
24
25        /**
26        * フェードアニメーションを実行する関数。
27        *
28        * @param {HTMLElement} element - アニメーションを適用するHTML要素。
29        * @param {number} opacStart - アニメーション開始時の不透明度(0.0から1.0まで)。
30        * @param {number} opacEnd - アニメーション終了時の不透明度(0.0から1.0まで)。
31        * @param {number} durationMS - アニメーションの持続時間（ミリ秒）。
32        * @param {string} buttonCaption - アニメーション終了後にボタンに表示するキャプション。
33        */
34        function fadeAnimation(element, opacStart, opacEnd, durationMS, buttonCaption) {
35            let intervalMS = 10;
36            let steps = Math.floor(durationMS / intervalMS);
37            if (steps == 0) steps = 1;
38            let opacStep = (opacEnd - opacStart) / steps;
39            let opacity = opacStart;
40            intervalId = setInterval(function(){
41                if (steps <= 0) {
42                    element.style.opacity = opacEnd;
43                    clearInterval(intervalId);
44                    isFadeOut = !isFadeOut;
45                    button.textContent = buttonCaption;
46                    button.disabled = false;
47                }
48                element.style.opacity = opacity;
49                opacity += opacStep;
50                steps--;
51            }, intervalMS);
52        }
53
54        button.addEventListener('click', function() {
55            button.disabled = true;
56            if (isFadeOut) {
57                fadeAnimation(image, 1, 0, 1000,'フェードイン');
58            } else {
59                fadeAnimation(image, 0, 1, 1000,'フェードアウト');
60            }
61        });
62    </script>
63</body>
64</html>

上記のfadeAnimationの中で、 intervalMS ミリ秒の間隔で、指定した不透明度を少しずつ変化させています。（43行目から54行目）
「持続時間÷間隔=ステップ数」だけ、不透明度の変更を繰り返し、所定のステップ数に達したら、clearInterval を呼んで繰り返しを止めます。（44～50行目）

（setInterval 関数は設定時にintervalIdを返します。clearInterval関数にその intervalId を指定して呼ぶことで、繰り返しを止めることができます）