Как я могу добавить сюда анимацию для изображений альбома и изображения тела, если я добавлю их в js? я не могу получить ⇐ CSS

[Anonymous]

Я создал массив с изображениями и меняю их после клика. К сожалению, изменить анимацию не могу. Я заметил, что смена изображений меняет их внешний вид при прохождении круга. Понятия не имею, в чем дело.

addEventListener("DOMContentLoaded", () => { константные песни = [ { name: "Никогда не отдам тебя", художник: «Рик Эстли», path: "audio/Never Gonna Give You Up (hardstyle).mp3", обложка: "img/Nevergonnagiveyouup.webp", }, { название: "БЕГУТ ЧЕРЕЗ 7-Й С МОИМИ ВУДИ", исполнитель: "$UICIDEBOY$ x POUYA", путь: "audio/$UICIDEBOY$ x POUYA - RUNNIN THRU THE 7th With My WOADIES.mp3", обложка: "img/Suicide.png", }, { name: "черный хлопок.реалист killaz.dumpin(izza remix)", исполнитель: "2Pac", путь: "audio/2pac черный хлопок.реалист killaz.dumpin(izzamuzzic remix).mp3", обложка: "img/2pac.jpg", }, { название: «Воздух», исполнитель: "Кости", путь: «аудио/Кости — Air.mp3», обложка: "img/bones.jpg", }, { название: «Предчувствие», художник: "Роберто Кан", путь: "аудио/Роберто Кан - Предчувствие.mp3", обложка: "img/kan.jpg", }, ]; const audio = document.querySelector(".audio"); const inputSlider = document.querySelector(".input__slider"); const inputVolume = document.querySelector(".input__volume"); const prevBtn = document.querySelector(".ri-rewind-fill"); const nextBtn = document.querySelector(".ri-speed-fill"); const паузаBtn = document.querySelector(".ri-pause-circle-fill"); const playBtn = document.querySelector(".ri-play-circle-fill"); константное время = (t) => { если (isNaN(t)) { вернуть «02:05»; // Грамотно обрабатываем NaN } пусть min = Math.floor(t / 60); если (мин < 10) мин = «0» + мин; let sec = Math.floor(t % 60); если (сек < 10) сек = «0» + сек; вернуть `${min}:${sec}`; }; пусть musicCounting = 0; const listMusic = (ключ) => { константная песня = песни [ключ]; document.querySelector(".img img").src = song.cover; audio.src = песня.путь; document.querySelector('body').style.background = `url(${song.cover})без повтора центр/обложка` document.querySelector(".name h1").innerHTML = song.artist; document.querySelector(".name p").innerHTML = song.name; const imgContainer = document.querySelector("img"); imgContainer.classList.add("hidden__img"); setTimeout(() => { imgContainer.innerHTML = ``; imgContainer.classList.remove("hidden__img"); }, 100) setTimeout(() => { inputSlider.max = audio.duration; document.querySelector(".time-two").innerHTML = time(audio.duration); }, 300); audio.volume = inputVolume.value / 100; }; const playMusic = () => { аудио.играть(); playBtn.classList.add("скрытый"); паузаBtn.classList.remove("скрыт"); }; константная паузаMusic = () => { аудио.пауза(); паузаBtn.classList.add("скрытый"); playBtn.classList.remove("скрытый"); }; playBtn.addEventListener("клик", playMusic); паузаBtn.addEventListener("клик", паузаMusic); inputVolume.addEventListener("input", () => { audio.volume = inputVolume.value / 100; }); prevBtn.addEventListener("клик", () => { musicCounting = (musicCounting - 1 + song.length) % song.length; listMusic (музыкальный счет); воспроизводить музыку(); }); nextBtn.addEventListener("клик", () => { musicCounting = (musicCounting + 1) % song.length; listMusic (музыкальный счет); воспроизводить музыку(); }); setInterval(() => { if (!isNaN(audio.duration)) { inputSlider.max = audio.duration; document.querySelector('.time-two').innerHTML = time(audio.duration); } if (!isNaN(audio.currentTime)) { inputSlider.value = audio.currentTime; document.querySelector('.time-one').innerHTML = time(audio.currentTime); } if (audio.currentTime >= inputSlider.max) { если (musicCounting >= song.length - 1) musicCounting = 0; еще musicCounting++; listMusic (музыкальный счет); воспроизводить музыку(); } }, 500); inputSlider.addEventListener(('change'),()=>{ audio.currentTime = inputSlider.value }) списокМузыка(0) }); @import url('https://fonts.googleapis.com/css2?famil ... ht@400;600; 700&family=Raleway:wght@400;500;700&display=swap'); @import './reset.scss'; .wrapper { минимальная высота: 100vh; ширина: 100%; фон: URL(); фоновый фильтр: размытие (10 пикселей); режим наложения фона: умножить; переход: фоновое изображение 1 с, легкость выхода; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; } .player__wrapper { отступ: 20 пикселей; граница: сплошной RGB (73, 63, 63) толщиной 1 пиксель; радиус границы: 10 пикселей; } .player__content { дисплей: гибкий; гибкое направление: столбец; выровнять-элементы: по центру; оправдание-содержание: центр; переход: 1с; размер фона: обложка; минимальная ширина: 340 пикселей; минимальная высота: 600 пикселей; высота: 60вх; ширина: 41вх; } .player__content-image { ширина: 100%; высота: 41вх; цвет фона: #171717; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; отступ: 20 пикселей; минимальная высота: 340 пикселей; } .album__image{ размер фона: обложка; ширина: 100%; высота: 100%; граница-радиус: 10%; режим наложения фона: умножить; переход: фоновое изображение 1 с, легкость выхода; } .player__content-navigation { цвет фона: #393e46; ширина: 100%; высота: 100%; отступ: 20 пикселей; } .navigation__song{ дисплей: гибкий; выровнять-элементы: по центру; оправдание-содержание: пространство между; поле внизу: 20 пикселей; } .navigation__text{ отступ: 0 0 20 пикселей 0; } .navigation__play-кнопка { ширина: 50 пикселей; цвет фона: прозрачный; курсор: указатель; } .navigation__actor { размер шрифта: var (--big-font-size); шрифт-вес: вар (--шрифт-жирный); отступ снизу: 5 пикселей; } .navigation__next-prev { дисплей: гибкий; выровнять-самостоятельно: гибкий старт; выровнять-элементы: по центру; разрыв столбца: 10 пикселей; & я{ курсор: указатель; цвет: RGB(21, 21, 21); размер шрифта: 30 пикселей; переход: цвет .2s легкость; &:наведите{ цвет: #2d3137; переход: цвет .2s легкость } } } .navigation__next-prev .ri-pause-circle-fill, .navigation__next-prev .ri-play-circle-fill{ размер шрифта: 60 ​​пикселей; } .слайдер{ дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; } .слайдер р{ цвет: #fff; размер шрифта: 18 пикселей; отступ: 0 10 пикселей; } ввод[тип='диапазон']{ внешний вид: нет; фон: #0ee6e6; высота: 5 пикселей; курсор: указатель; радиус границы: 10 пикселей; } .input__slider{ ширина: 56%; } .объем{ дисплей: гибкий; оправдание-содержание: правильно; выровнять-элементы: по центру; } .том я { отступ: 0 20 пикселей; белый цвет; размер шрифта: 20 пикселей; } .input__volume{ ширина: 30%; } .скрытый{ дисплей: нет; } изображение { непрозрачность: 1; преобразование: непрозрачность 0,5 легкость; } img.hidden__img { непрозрачность: 0; переход: непрозрачность 0,7 с, легкость } аудиоплеер



Я использовал непрозрачность, разные типы анимации, но все равно не работает. При переключении изображение песни тоже меняется, но это выглядит как ужас для эпилептика.