用 JS 改變不同的 CSS 動畫

Question

視覺：在“mouseenter”上旋轉字母並改變顏色。 在第二個“鼠標輸入”上旋轉字母並改變顏色。

問題：更改類時，第二個動畫不起作用。

 const landingEl = document.getElementById("landing"); const landingText = document.getElementById("landing-text"); // line brake on dot const landingFraze = `Lorem ipsum dolor sit amet consectetur adipisicing elit.`; const spans = document.getElementsByTagName('span'); let letterList = []; let text; // rotate leter function function rotate(ind) { let index = ind.path[0].id let spiningLeter = document.getElementById(index); if(!spiningLeter.classList.contains ('rotate') & !spiningLeter.classList.contains('unrotate')) { spiningLeter.classList.add('rotate'); } else if (spiningLeter.classList.contains('unrotate')) { spiningLeter.classList.remove('unrotate'); spiningLeter.classList.add('rotate'); } else { spiningLeter.classList.replace('rotate', 'unrotate'); } } function everyLeter() { let text = landingFraze; // split fraze in sentences on dot let sentenceList = text.split("."); // adding css to every letter sentenceList.forEach((element, i) => { let div = document.createElement('div'); // spliting every letter let list = element.split(""); // creating new element and adding letter to it with css list.forEach((leter, index) => { let span = document.createElement("span"); span.id = `${index}a${i}`; // event listener on mouse enter span.addEventListener('mouseenter', rotate); let leterP = document.createElement('p'); // adding space between words if(leter === ' ') { leterP.style.marginLeft = '20px' } // add a dot at the end of the sentence if(list.length === index + 1){ leterP.textContent = `${leter}.`; } else { leterP.textContent = leter; } // appending span.appendChild(leterP); div.appendChild(span); }); // appending div to landing landingText.appendChild(div); }); } // functions everyLeter();

 @import url("https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Roboto:wght@400;700&display=swap"); :root { --font-color: rgb(243, 14, 224); } .landing-text { font-family: "Luckiest Guy", cursive; flex-wrap: wrap; height: 100vh; font-size: 6vw; margin-top: 40vh; margin-left: 4rem; } .landing-text div{ display: flex; max-height: 120px; } .rotate { animation: rotate 2s forwards; } @keyframes rotate { 100% { transform: rotateY(720deg); color: var(--font-color); } }; .unrotate { animation: unrotate 2s forwards; } @keyframes unrotate { 100%{ transform: rotateY(720deg); color: black; }; }

 <div class="landing" id='landing'> <div class ="landing-text" id="landing-text"></div> </div>

視覺：在“mouseenter”上旋轉字母並改變顏色。 在第二個“鼠標輸入”上旋轉字母並改變顏色。

問題：更改類時，第二個動畫不起作用。

腳本

function rotate(ind) {
  let index = ind.path[0].id;
  let spiningLeter = document.getElementById(index);
  
  if(!spiningLeter.classList.contains ('rotate') & !spiningLeter.classList.contains('unrotate')) {
    spiningLeter.classList.add('rotate');
  }
  else if (spiningLeter.classList.contains('unrotate')) {
    spiningLeter.classList.remove('unrotate');
    spiningLeter.classList.add('rotate');
    
  }
    else {
    spiningLeter.classList.replace('rotate', 'unrotate');
}
}

CSS

.rotate {  
    animation: rotate 2s  forwards;
    }
  
@keyframes rotate {
    100% {
      transform: rotateY(360deg);
      color: rgb(26, 212, 2)}    
  };

.unrotate {
    animation: unrotate 2s forwards;
    }
@keyframes unrotate {
    100%{
      transform: rotateY(720deg);
      color: var(--font-color);
  };
  }

Answer 1

嘗試指定每個動畫的開始狀態。

 const landingEl = document.getElementById('landing') const landingText = document.getElementById('landing-text') // line brake on dot const landingFraze = `Lorem ipsum dolor sit amet consectetur adipisicing elit.` const spans = document.getElementsByTagName('span') let letterList = [] let text // rotate leter function function rotate(ind) { let spiningLeter = ind.target if (!spiningLeter.classList.contains('rotate') & !spiningLeter.classList.contains('unrotate') ) { spiningLeter.classList.add('rotate') } else if (spiningLeter.classList.contains('unrotate')) { spiningLeter.classList.remove('unrotate') spiningLeter.classList.add('rotate') } else { spiningLeter.classList.replace('rotate', 'unrotate') } } function everyLeter() { let text = landingFraze // split fraze in sentences on dot let sentenceList = text.split('.') // adding css to every letter sentenceList.forEach((element, i) => { let div = document.createElement('div') // spliting every letter let list = element.split('') // creating new element and adding letter to it with css list.forEach((leter, index) => { let span = document.createElement('span') span.id = `${index}a${i}` // event listener on mouse enter span.addEventListener('mouseenter', rotate) let leterP = document.createElement('p') // adding space between words if (leter === ' ') { leterP.style.marginLeft = '20px' } // add a dot at the end of the sentence if (list.length === index + 1) { leterP.textContent = `${leter}.` } else { leterP.textContent = leter } // appending span.appendChild(leterP) div.appendChild(span) }) // appending div to landing landingText.appendChild(div) }) } // functions everyLeter()

 :root { --font-color: rgb(243, 14, 224); } .landing-text { font-family: 'Luckiest Guy', cursive; font-size: 4vw; } .landing-text div { display: flex; flex-wrap: wrap; align-items: center; } .rotate { animation: rotate 2s forwards; } @keyframes rotate { 0% { color: black; transform: rotateY(0deg); } 100% { transform: rotateY(720deg); color: var(--font-color); } } .unrotate { animation: unrotate 2s forwards; } @keyframes unrotate { 0% { color: var(--font-color); transform: rotateY(720deg); } 100% { transform: rotateY(0deg); color: black; } } /* For demo only */ span { margin: 4px; padding: 0; line-height: 0px; } /* ***** */

 <div class="landing" id="landing"> <div class="landing-text" id="landing-text"></div> </div>