実現したいこと
交互に表示させたい要素が2つあります。
#tempCと#tempF
tempSwitchをクリックする度に既存で表示されている要素が下にfade outし、もう片方の要素を上からfade in するようにしたいです。
nextSiblingだとtempFの次がないので動かなくなります。
tempFが表示されている際にクリックした時にtempFが下にfade outし、tempCを上からfade in するには今書いているコードの理論だとそもそも通用しないのでしょうか。
発生している問題・エラーメッセージ
偶数回でクリックすると一瞬でもとに戻ってしまいます。
該当のソースコード
html
1 <div class="info"> 2 <div class="info-box temp"> 3 <h4>Temperature</h4> 4 <div class="arrow-wrapper"> 5 <div class="temp-flex"> 6 <p id="tempC"></p> 7 8 <p id="tempF"></p> 9 </div> 10 <button><i class="fa-solid fa-chevron-down" id="temp-switch"></i></button> 11 </div> 12 </div>
css
1.fade-out { 2animation: fade-out 2s ease-in forwards; 3} 4 5@keyframes fade-out { 6 0% { 7 opacity: 1; 8 transform: translateY(0px); 9 } 10 11 100% { 12 opacity: 0; 13 transform: translateY(40px); 14 15 } 16} 17 18#tempF { 19 display: none; 20} 21 22#tempF.fade-in { 23 animation: fade-in 2s ease-in forwards; 24 display: block; 25 26 } 27 28 @keyframes fade-in { 29 0% { 30 /* display: none; */ 31 opacity: 0; 32 transform: translateY(-40px); 33 } 34 35 100% { 36 display: block; 37 transform: translateY(0px); 38 39 } 40 } 41
js
1let clickCount = 0 2 3 tempSwitch.addEventListener('click', function () { 4 console.log(clickCount) 5 clickCount += 1 6 7 allTemp.forEach(function (e) { 8 if(clickCount % 2 !== 0 ) { 9 console.log("odd") 10 e.classList.add('fade-out') 11 e.classList.add('fade-in') 12 } else{ 13 console.log("even") 14 // Fは最後見える 15 e.classList.remove('fade-out') 16 e.classList.remove('fade-in') 17 } 18 19 }) 20
初心者で偶数・奇数で条件分岐の記事などを見ましたがアニメーションも同時に行っているものがなくどうやって考えればいいのか悩んでいます。tempC, tempFにアニメーションを与えるのではなく今表示されている方の文字にfade-outを与え、もう片方にfade-inを与えたいです。

回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。