How can I fix the animation bug?

Question

css

The fact is that when the popup is already open and I want to click on another card without closing it, then the information of the new card is shown for a split second, and then the replacement animation takes place. To make it clearer, open one of the cards and, without closing it, click on the other, while paying attention to the name in the popup. It first changes, and then the replacement animation takes place. How can I fix this?

Answer 1

too lazy to explain

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)

  })
})