【JavaScript】buttonでアニメーションを何度も切り替えられるようにしたい

Question

実現したいこと

• １つのボタンを使って、画像のフェードイン、フェードアウトのアニメーションを切り替えられるようにしたい

前提

下図の画像を「ファードアウト」ボタンを押したらフェードアウトさせ
再度ボタンを押したらフェードインするように実装したいです。

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

エラーは発生していません。
フェードアウトの状態からボタンを押しても、何も変わらない状態です。

該当のソースコード

#wrapper {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box {
    display: flex;
    flex-direction: column;
}

#button {
    width: 200px;
    height: 60px;
    background-color: #fdd;
    border: none;
    margin: 0 auto 20px;
    cursor: pointer;
}

#image {
    width: 300px;
    opacity: 1;
}

<div id="wrapper">
        <div class="box">
            <button id="button" type="submit">フェードアウト</button>
            <img  id="image" src="./images/outsourcing.jpg" alt="サンプル画像">
        </div>
</div><!-- wrapper -->

 <script>
        window.addEventListener('DOMContentLoaded', function fadeAnimation(e){
            e.preventDefault();
             // if判定用
            let isCrick = false;

            let isButton =  document.querySelectorAll('#button')[0]
            let fadeImage =  document.querySelectorAll('#image')[0]
            isButton.addEventListener('click',()=>{
                if(isCrick){
                    //二重処理防止
                    return false;
                 }else if( isButton.textContent = 'フェードアウト' ){
                    // ボタンの文字を変える
                    isButton.textContent = 'フェードイン';
                    // 1クリック時
                    isCrick = true;

                     fadeImage.animate(
                 [
                    //透過度(1：初期状態→0：完全に透過) 
                    {opacity: 1},
                    {opacity: 0}
                 ],
                 {
                     // アニメーション時間
                     duration: 2000,
                     // 最後の状態で停止
                     fill: 'forwards'
                 })
                }else{
                    // ボタンの文字を変える
                    isButton.textContent = 'フェードアウト';
                    // 1クリック時
                    isCrick = true;

                     fadeImage.animate(
                 [
                    //透過度(1：初期状態→0：完全に透過) 
                    {opacity: 0},
                    {opacity: 1}
                 ],
                 {
                     // アニメーション時間
                     duration: 2000,
                     // 最後の状態で停止
                     fill: 'forwards'
                 })
                    
                }
                
                
               }
             )
        });
    </script>

試したこと

透明度の変更にclasslistを使用してみたりしましたが、animationとは一緒に使えないとわかりました。

Answer 1

共通化のためにリストを作っておくと楽かもしれませんね
個人的な感覚だとボタンのテキストはアニメーション後に変わったほうがよいと思います。

<script>
window.addEventListener('DOMContentLoaded',()=>{
  const isButton =  document.querySelector('#button');
  const fadeImage =  document.querySelector('#image');
  isButton.addEventListener('click',()=>{
    isButton.disabled=true;
    let status=isButton.dataset.status;
    status=(isButton.dataset.status=status=="in"?"out":"in");
    const list={
      "in": {txt:"フェードイン"  ,opa_from:1,opa_to:0},
      "out":{txt:"フェードアウト",opa_from:0,opa_to:1},
    }
    const option={ duration: 2000,fill: 'forwards'};
    const myKeyframe= new KeyframeEffect(
      fadeImage,
      [
        {opacity:list[status].opa_from},
        {opacity:list[status].opa_to}
        ],
      option);
    const myAnime = new Animation(myKeyframe,document.timeline);
    myAnime.play();  
    myAnime.addEventListener('finish',()=>{
      isButton.textContent = list[status].txt;
      isButton.disabled=false;
    });
  });
});
</script>
<div id="wrapper">
<div class="box">
<button id="button" type="submit">フェードアウト</button>
<img  id="image" src="./images/outsourcing.jpg" alt="サンプル画像">
</div>
</div>

Comments

[ski]

ご回答ありがとうございます。
ご提示いただいたコードを基に、Web Animation APIについて詳しく学習しました。
コードが単純化され、意味が分かれば何をしたいかが理解しやすいです。

Answer 2

                 }else if( isButton.textContent = 'フェードアウト' ){

これは代入文です。= を == に変えましょう。

Comments

[ski]

ご指摘ありがとうございます。
おっしゃる通りですね。
「＝＝」と「＝＝＝」もややこしくなるので
再度演算子について確認しました。