Как я могу исправить баг анимации?

Question

[Roderen]

Дело в том, что когда попап уже открыт и я хочу не закрывая его нажать на другую карточку, то на долю секунды показывается информация уже новой карточки, а потом происходит анимация замены. Чтобы было понятней, откройте одну из карточек и не закрывая её нажмите на другую, при этом обратите внимание на имя в попапе. Оно сначала меняется, а потом уже происходит анимация замены. Как я могу это исправить?

Comments

[Сергей Сергей]

card.forEach( (itemCard, index) => {
  itemCard.addEventListener('click', (item) => {
    cardPopup.classList.remove('active');
    setTimeout(() => {
      cardPopup.classList.add('active')
      cardPopup.innerHTML = `
        <div class="card__popup-close" onclick="cardPopupCloseFun()"></div>
        <div class="card__popup-image">
          <img src="${arrayOfCards[index].image}" alt="">
        </div>
        <div class="card__popup-info">
          <h2 class="card__popup-name">${arrayOfCards[index].name}</h2>
          <p class="card__popup-title">${arrayOfCards[index].title}</p>
        </div>
      `;         
    }, 300)

  })
})

[Roderen]

Сергей Сергей, Спасибо! Напишите в ответы пожалуйста, чтобы я отметил решением

Answer 1

[Сергей Сергей]

лень объяснять

card.forEach( (itemCard, index) => {
  itemCard.addEventListener('click', (item) => {
    cardPopup.classList.remove('active');
    setTimeout(() => {
      cardPopup.classList.add('active')
      cardPopup.innerHTML = `
        <div class="card__popup-close" onclick="cardPopupCloseFun()"></div>
        <div class="card__popup-image">
          <img src="${arrayOfCards[index].image}" alt="">
        </div>
        <div class="card__popup-info">
          <h2 class="card__popup-name">${arrayOfCards[index].name}</h2>
          <p class="card__popup-title">${arrayOfCards[index].title}</p>
        </div>
      `;         
    }, 300)

  })
})