２つの要素をクリックごとに交互にfadein,fadeoutしたい

実現したいこと

交互に表示させたい要素が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件

付け替えるだけならtoggle処理でよいでしょう

javascript
1<script>
2window.addEventListener('DOMContentLoaded', ()=>{
3  const tempSwitch=document.querySelector('#temp-switch');
4  const allTemp=document.querySelectorAll('.temp-flex p');
5  tempSwitch.addEventListener('click',e=>{
6    tempSwitch.textContent=tempSwitch.textContent=="even"?"odd":"even";
7    allTemp.forEach(n=>{
8      n.classList.toggle('fade-out');
9      n.classList.toggle('fade-in');
10    });
11  });
12});
13</script>
14<div class="temp-flex">
15<p id="tempC" class="fade-out">C</p>
16<p id="tempF" class="fade-in">F</p>
17</div>
18<button id="temp-switch">even</button>

投稿2023/01/05 00:34

yambejp

総合スコア109859

ベストアンサー

#tempCと#tempFにクラスの付け替えをするのではなく、
親要素のtemp-flexにクラスの付け外しをした方がシンプルにできるでしょう。

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">°C</p>
7        <p id="tempF">°F</p>
8      </div>
9      <button id="temp-switch"><i class="fa-solid fa-chevron-down"></i></button>
10    </div>
11</div>

css
1.temp-flex {
2  position: relative; 
3  display: flex;
4  margin-bottom: 20px;
5}
6#tempF {
7  opacity: 0;
8  position: absolute;
9  top: 0;
10}
11.temp-flex.temp-f #tempC,
12.temp-flex #tempF {
13  animation: fade-out 2s ease-in forwards;
14}
15.temp-flex #tempC,
16.temp-flex.temp-f #tempF {
17  animation: fade-in 2s ease-in forwards;
18}
19@keyframes fade-out {
20  0% {
21    opacity: 1;
22    transform: translateY(0px);
23  }
24  100% {
25    opacity: 0;
26    transform: translateY(40px);
27  }
28}
29@keyframes fade-in {
30  0% {
31    opacity: 0;
32    transform: translateY(-40px);
33  }
34  100% {
35    opacity: 1;
36    transform: translateY(0px);
37  }
38}

JavaScript
1const tempSwitch = document.querySelector("#temp-switch");
2const temp = document.querySelector(".temp-flex");
3tempSwitch.addEventListener("click", (e) => {
4  temp.classList.toggle("temp-f");
5});