При первом нажатии на кнопку анимация не срабатывает?
Вот логика функции. То-есть при каждом нажатии на табов рендерится новый HTML и вещается обработчик.
function render(groups, name) { const group = groups[name]; const students = group.students; let studentsHTML = ""; for (const key in students) { const student = ` <div class="student">${students[key].name}</div> `; studentsHTML += student; } const HTML = ` <h2 class="name">${group.name}</h2> <button class="accordion-btn">Скрыть</button> <div class="accordion"> <div class="description"> ${group.description} </div> <div class="students-box"> <h3 class="caption">Студенты</h3> <div class="students"> ${studentsHTML} </div> </div> </div> `; groupInfo.innerHTML = HTML; const accordionBtn = document.querySelector(".accordion-btn"); accordionBtn.onclick = () => { const accordion = accordionBtn.nextElementSibling; if (accordion.classList.contains("hidden")) { accordion.style.maxHeight = accordion.scrollHeight + "px"; accordion.classList.remove("hidden"); accordionBtn.textContent = "Скрыть"; } else { accordion.style.maxHeight = 0; accordion.classList.add("hidden"); accordionBtn.textContent = "Показать"; } }; } |
function render(groups, name) { const group = groups[name]; const students = group.students; let studentsHTML = ""; for (const key in students) { const student = ` <div class="student">${students[key].name}</div> `; studentsHTML += student; } const HTML = ` <h2 class="name">${group.name}</h2> <button class="accordion-btn">Скрыть</button> <div class="accordion"> <div class="description"> ${group.description} </div> <div class="students-box"> <h3 class="caption">Студенты</h3> <div class="students"> ${studentsHTML} </div> </div> </div> `; groupInfo.innerHTML = HTML; const accordionBtn = document.querySelector(".accordion-btn"); accordionBtn.onclick = () => { const accordion = accordionBtn.nextElementSibling; if (accordion.classList.contains("hidden")) { accordion.style.maxHeight = accordion.scrollHeight + "px"; accordion.classList.remove("hidden"); accordionBtn.textContent = "Скрыть"; } else { accordion.style.maxHeight = 0; accordion.classList.add("hidden"); accordionBtn.textContent = "Показать"; } }; }
Единственная проблема это при первом нажатии не срабатывает анимация, то-есть transition. Как это пофиксить?
Дополнительно:
Ответы:
Вот примерно думаю такая же анимация раскрытия блока аккордеона
https://codepen.io/Yurajun/pen/gOBdKzL
Тут в setTimeout присваиваем желаемую высоту, так как нужно чтоб прошел один тик между height 0 и height новая высота
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы понять, почему анимация не срабатывает при первом нажатии на кнопку, нужно проанализировать код и выявить возможные причины проблемы. Вот несколько шагов, которые можно предпринять, чтобы исправить данную ситуацию:
1. Проверьте, что у вас правильно подключены все необходимые библиотеки и файлы стилей для работы с анимациями. Убедитесь, что пути к файлам указаны корректно и файлы доступны.
2. Проверьте, что у вас правильно заданы селекторы для элементов, к которым применяется анимация. Удостоверьтесь, что селекторы указаны верно и соответствуют нужным элементам.
3. Убедитесь, что у вас правильно настроены параметры анимации, такие как продолжительность, задержка, тип анимации и другие свойства. Проверьте, что все параметры указаны правильно и не приводят к конфликтам.
4. Проверьте, нет ли ошибок в самом JavaScript коде, который отвечает за запуск анимации при нажатии на кнопку. Удостоверьтесь, что код написан корректно и не содержит синтаксических ошибок.
5. Попробуйте добавить отладочный вывод в консоль браузера, чтобы увидеть, возникают ли какие-либо ошибки или предупреждения при попытке запустить анимацию.
Приведу пример кода на языке программирования PHP, который может помочь в решении данной проблемы:
<button>Нажми меня</button> function myFunction() { var element = document.getElementById("myElement"); element.classList.add("animate"); } .animate { animation: myAnimation 1s; } @keyframes myAnimation { from { opacity: 0; } to { opacity: 1; } }
Надеюсь, эти шаги помогут вам разобраться с проблемой анимации, которая не срабатывает при первом нажатии на кнопку. Если проблема сохраняется, попробуйте дополнительно исследовать код и найти возможные ошибки или конфликты, которые могут препятствовать корректной работе анимации.