CSS исчезает из div и исчезает в новом div ⇐ CSS

[Anonymous]

У меня есть сетка кнопок, и при нажатии одной из кнопок я хочу, чтобы сетка исчезла, а новый элемент div исчез, заменяя пространство кнопок, поэтому у меня есть анимация для непрозрачности 1->0 и наоборот, с добавлением/удалением display:none, поэтому содержимое заменяется.
У меня это работает (возможно, не самое чистое решение, поскольку оно все еще новичок в анимации), но в новый div. У меня есть кнопка «Назад», которая будет делать обратное (затухание нового div, исчезновение исходной сетки). У меня это почти получилось, новый элемент div исчезает правильно, но исходная сетка сначала появляется снова, а затем исчезает, и я не знаю, как это исправить.
( Не уверен, что это актуально, но я делаю это в Angular, но я перешел на ванильный JS) Вот мой код и код

Код: Выделить всё

function showAccordion(){
document.getElementById('faq-support-boxes-grid')?.classList.add('fadeOut');
setTimeout(() => {
document.getElementById('faq-support-boxes-grid')?.classList.add('hide-element');
document.getElementById('accordion-container')?.classList.add('fadeIn');
document.getElementById('accordion-container')?.classList.add('show-element');
}, 1000);
}

function resetAccordion(){
document.getElementById('accordion-container')?.classList.remove('fadeIn');
document.getElementById('accordion-container')?.classList.add('fadeOut');
setTimeout(() => {
document.getElementById('accordion-container')?.classList.remove('show-element');

}, 1000);
setTimeout(() =>{
document.getElementById('faq-support-boxes-grid')?.classList.remove('fadeOut');
document.getElementById('faq-support-boxes-grid')?.classList.remove('hide-element');
document.getElementById('faq-support-boxes-grid')?.classList.add('fadeIn');

},2000)
}

Код: Выделить всё

.faq-support-boxes-grid {
background-color: #fff;
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);

opacity: 1;

.feature-box{
background-color:#a6a6a6;
text-align:center;
img{
display: inline;
width:40%;
}
}
}

.fadeOut {
animation: fadeOutTop 1s ease-out;
animation-fill-mode: forwards;
}

.fadeIn {
animation: fadeInTop 1s ease-out 1s;
animation-fill-mode: forwards;
}
.accordion-container{
transform: translateY(-30rem);
opacity: 0;
display: none;
transition: all 1s;
}

.accordion-container >  div{
display: none;
}

.accordion-back{
transform: translateY(-10%);
display: block;
color:#325390 !important;
}

.show-element{
display: block !important;
}
.hide-element{
display: none !important;
}

@keyframes fadeOutTop{
0%{
opacity: 1;
transform: translate(0rem);
}
100%{
opacity: 0;
transform: translateY(-30rem);
}
}

@keyframes fadeInTop{
100%{
opacity: 1;
transform: translate(0rem);
}
0%{
opacity: 0 ;
transform: translateY(-30rem);
}
}

Код: Выделить всё

[img]https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png[/img]
Heading 1
some text

[img]https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png[/img]
Heading  2
some text

[img]https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png[/img]
Heading 3
some text

[img]https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png[/img]
Heading 4
some text

[img]https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png[/img]
Heading 5
some text

[img]https://www.adaptivewfs.com/wp-content/uploads/2020/07/logo-placeholder-image.png[/img]
Heading 6
some text




Back

Подробнее здесь: https://stackoverflow.com/questions/782 ... in-new-div