Мобильная версияЯ создаю боковую панель для веб-сайта, над которым работаю, и пытаюсь научиться перемещать элементы списка по отдельности в JavaScript с помощью цикла for. Я попытался реализовать список в массиве и заставить каждый из них перемещаться при нажатии кнопки на боковой панели. Однако я не могу заставить их двигаться. Может кто-нибудь взглянуть и дать мне совет, спасибо.
constsidebarBut = document.querySelector('.sideBarBut'); пусть openClose = ложь; пусть анимацияInProgress = false; const list = document.querySelectorAll('.projects'); SidebarBut.addEventListener('клик', анимация); функция анимации(){ если (animationInProgress) return; анимацияInProgress = правда; const Sidebar = document.getElementById('sidebar'); если (openClose !== true) { Sidebar.classList.remove('animate2'); Sidebar.classList.add('animate1'); document.querySelector('.animate1').style.animationPlayState = "работает"; for (пусть я = 0; я [*] { анимацияInProgress = ложь; }, 600); body { маржа: 0; цвет фона: черный; } /*--------Заголовок--------*/ #header { положение: липкое; верх: 0; z-индекс: 999; } .header1 { выравнивание текста: по центру; максимальная ширина: 100%; ширина: 100%; высота: 50 пикселей; цвет фона: черный; } .aboutButton { отображение: встроенный блок; высота: 50 пикселей; ширина: 150 пикселей; высота строки: 50 пикселей; белый цвет; текстовое оформление: нет; семейство шрифтов: без засечек; размер шрифта: 20 пикселей; положение: относительное; слева: 5 пикселей; } .Главная кнопка { отображение: встроенный блок; высота: 50 пикселей; ширина: 150 пикселей; высота строки: 50 пикселей; белый цвет; текстовое оформление: нет; размер шрифта: 20 пикселей; семейство шрифтов: без засечек; } .projectButton { отображение: встроенный блок; высота: 50 пикселей; ширина: 150 пикселей; высота строки: 50 пикселей; белый цвет; текстовое оформление: нет; семейство шрифтов: без засечек; размер шрифта: 20 пикселей; положение: относительное; справа: 5 пикселей; } .aboutButton:hover { цвет: RGB(200, 200, 200); } .homeButton:hover { цвет: RGB(200, 200, 200); } .projectButton:hover { цвет: RGB(200, 200, 200); } .githubButton { позиция: абсолютная; верх: -223,8 пикселей; слева: 83,3%; преобразование: масштаб (0,0675); } .linkedinButton { позиция: абсолютная; верх: -230 пикселей; осталось: 80%; преобразование: масштаб (0,065); } .instagramButton { позиция: абсолютная; верх: -230 пикселей; слева: 76,65%; преобразование: масштаб (0,065); } .githubButton:hover { преобразование: масштаб (0,075); } .linkedinButton:hover { преобразование: масштаб (0,075); } .instagramButton:наведите { преобразование: масштаб (0,075); } .header2 { максимальная ширина: 100%; ширина: 100%; высота: 5 пикселей; фон: линейный градиент (вправо, черный, белый, черный); } /*--------Боковая панель--------*/ .sideBarBut { преобразование: масштаб (0,065); цвет фона: черный; положение: фиксированное; внизу: 742,5 пикселей; слева: -235 пикселей; курсор: указатель; } .sideBarBut:hover { фильтр: яркость(80%); } .sidebarTitle { белый цвет; положение: фиксированное; верх: -50 пикселей; /*7 пикселей*/ слева: 95 пикселей; размер шрифта: 28 пикселей; семейство шрифтов: без засечек; оформление текста: подчеркивание; смещение подчеркивания текста: 4 пикселя; толщина текста-декорации: 2 пикселя; } @keyframes titleDrop { 0% { ширина: 0; border-right: 0px сплошной прозрачный; } 100% { ширина: 250 пикселей; правая граница: 2 пикселя, сплошной белый; } } #сайдбар { z-индекс: 1000; высота: 100%; ширина: 0; положение: фиксированное; верх: 0; слева: 0; цвет фона: черный; border-right: 0px сплошной прозрачный; } .animate1 { состояние анимации-воспроизведения: приостановлено; имя анимации: SidebarOpen; продолжительность анимации: 0,75 с; режим анимации-заполнения: вперед; } .animate2 { состояние анимации-воспроизведения: приостановлено; имя-анимации: SidebarClosed; продолжительность анимации: 0,75 с; режим анимации-заполнения: вперед; } @keyframes боковая панельOpen { 0% { ширина: 0; border-right: 0px сплошной прозрачный; } 100% { ширина: 250 пикселей; правая граница: 2 пикселя, сплошной белый; } } @keyframes SidebarClosed { 0% { ширина: 250 пикселей; правая граница: 2 пикселя, сплошной белый; } 100% { ширина: 0; border-right: 0px сплошной прозрачный; } } .projectLinks { ширина: 200 пикселей; положение: фиксированное; верх: 40 пикселей; слева: -1000 пикселей; /*20 пикселей*/ белый цвет; стиль списка: нет; отступ слева: 0; } .проекты { текстовое оформление: нет; цвет: наследовать; размер шрифта: 20 пикселей; семейство шрифтов: без засечек; высота строки: 30 пикселей; } .projects:hover { цвет: RGB(200, 200, 200); Страница проектов Обо мне Главная Проекты
Проекты
