クリックしても二回目にフェードイン効果が効かないアニメーション

実現したいこと

ボタンをクリックすると.fadeInがついた要素が animation-durationされたテキストがふわっと浮かんでくるようにしたいのですが
二回目以降クリックすると、.fadeInがついているのにも関わらずアニメーションが掛かっていません。
どうすればいいでしょうか？

該当のソースコード

index.html
1
2        .fadeIn{
3            animation-name:fadeInAnime;
4            animation-duration:3s;
5            animation-fill-mode:forwards;
6            opacity:0;
7        }
8
9        @keyframes fadeInAnime{
10            from {
11                opacity: 0;
12            }
13
14            to {
15                opacity: 1;
16            }
17        }
18        
19    </style>
20
21<script type="text/javascript" charset="UTF-8" src="//cache1.value-domain.com/xrea_header.js" async="async"></script>
22</head>
23<body>
24  
25    <p  id="name"></p>
26    <p class="text-button" id="text-button">Click Here</p>
27   
28    <script>
29    //省略
30                if(name.classList.contains("fadeIn")){ 
31                  
32                    console.log(words);
33                    console.log(name);
34                    
35                }else{
36                   
37                    words.classList.add("fadeIn");
38                    name.classList.add("fadeIn");
39                    
40                }
41                words.innerHTML = wordsList[selecter];
42                name.innerHTML = nameValue;
43                button.style.fontSize = "20px";
44                button.innerHTML = "See More";
45                
46             });
47        }; 
48    </script>
49</body>			
50

補足情報（FW/ツールのバージョンなど）

vscode

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

回答1件

ベストアンサー

クラスをつけっぱなしだとアニメーションを最初から再生することはないので、name.getAnimations()[0].play()などとするか、クラスを外してからつけるとか、そのあたりでしょうか。

投稿2024/04/11 07:11

Lhankor_Mhy

総合スコア37409

loving

2024/04/11 07:37 編集

回答大変ありがとうございます。 if(name.getAnimations()[0].play()){ としたら全く動かなくなってしまったのですが間違っているところを教えてください。お願いします。

loving

2024/04/11 07:38 編集

また、下記のように一度クラス名を除外して再度付け直してもアニメーションされません。どうすればいいでしょうか？ if(name.classList.contains("fadeIn")){ words.classList.remove("fadeIn"); name.classList.remove("fadeIn"); words.classList.add("fadeIn"); name.classList.add("fadeIn"); }else{ words.classList.add("fadeIn"); name.classList.add("fadeIn"); }