PE
Только дисплей не тоглается... Смотрю..
🙏
Возьму первый вариант и постараюсь его допилить...
Он ПРЕКРАСЕН!!!!!!!
Size: a a a
2021 October 14
М
я понял в чем была проблема
М
const modelsContainer = document.querySelector('.models__list')
const modelsItems = modelsContainer.querySelectorAll('.models__item')
modelsContainer.addEventListener('click', (e) => {
if(e.target.classList.contains('js-close')) {
const item = e.target.closest('.models__item')
modelsItems.forEach(modalItem => modalItem != item && modalItem.classList.remove('open'))
item.classList.toggle('open')
}
})М
вот рабочий, только в цсс display: block; вот сюда
.models__item.open .models__wrapper {
padding: 0.5em 2em 2em 5em;
display: block;
}
PE
Давай кошелек - задоначу!
М
Но тут, опять же, без анимации(
PE
Заанимировать можно
PE
Например по классу менять высоту.Проблема в том, что изменение высоты через КСС - дает неприятный прыжок контента.
PE
Поэтому, предпочитают через опасити выходить... Я еще не видела гладкой анимации высот, даже через max-height.
Только с js
Только с js
М
Ага, помню через макс-хейт что-то, такое, сейчас посмотрю
PE
У меня есть заготовка для него...
Тебе не понравиться.)))
Тебе не понравиться.)))
PE
Ща.
PE
Но скорее всего... Я просто не могу ухватить правильный интервал анимации...
PE
Чтобы фон дновременно с высотой уходил.(
М
const modelsContainer = document.querySelector('.models__list')
const modelsItems = modelsContainer.querySelectorAll('.models__item')
modelsContainer.addEventListener('click', (e) => {
if(e.target.classList.contains('js-close')) {
const item = e.target.closest('.models__item')
const modalWrapper = item.querySelector('.models__wrapper')
console.log(modalWrapper.scrollHeight);
modelsItems.forEach(modalItem => modalItem != item && modalItem.classList.remove('open'))
item.classList.toggle('open')
modalWrapper.style.maxHeight = item.classList.contains('open')
? `${modalWrapper.scrollHeight}px`
: '0'
}
})М
у меня вот так получилось, тоже, правда дергает. В цсс нужно убрать дисплеи с .models__wrapper и поставить макс-хейт 0