#javascript #css
Вопрос:
Видение: В «центре мыши» вращайте букву и меняйте цвет. На втором «центре мыши» поверните букву и измените цвет обратно.
Проблема: При смене класса вторая анимация не работает.
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') amp; !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) =gt; { 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) =gt; { 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 Guyamp;family=Roboto:wght@400;700amp;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; }; } lt;div class="landing" id='landing'gt; lt;div class ="landing-text" id="landing-text"gt;lt;/divgt; lt;/divgt; Vision: On «mouseenter» spin the letter and change the color. On second «mouseenter» spin the letter and change color back.
Проблема: При смене класса вторая анимация не работает.
Javscript
function rotate(ind) { let index = ind.path[0].id; let spiningLeter = document.getElementById(index); if(!spiningLeter.classList.contains ('rotate') amp; !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); }; } Комментарии:
1. Не могли бы вы превратить свой код в фрагмент кода, который мы сможем запустить. В частности, я не вижу, где вы установили CSS-переменную цвета шрифта. Просмотр в инструментах разработки вашего браузера проверка объекта должна показать вам, установлен ли он. Кроме того, вы уже повернули элемент на 720 градусов — хотите повернуть его обратно (-720 градусов)?
2. Направление вращения не имеет значения. В инструментах разработки показано, что добавлен класс «unrotate», но его фактическая анимация отсутствует.
3. Разве это не потому, что он уже повернут на 270 градусов?
4. Ваш фрагмент кода не работает.
let index = ind.path[0].idне определено5. Изменили первый поворот на 360 и второй на 720. Не помогает. Пробовали ставить другие анимации. Также не работает
Ответ №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') amp; !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) =gt; { 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) =gt; { 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; } /* ***** */ lt;div class="landing" id="landing"gt; lt;div class="landing-text" id="landing-text"gt;lt;/divgt; lt;/divgt;