Estoy usando la propiedad de animación CSS para animar la ventana cuando el usuario hace clic en el botón maximizar. La ventana se crea SOLAMENTE cuando se hace clic en el botón de maximizar y la animación está funcionando, pero el problema es que cuando hago clic en el botón de cerrar, la ventana no se anima. ¿Cómo puedo animar cuando se hace clic en el botón de cerrar?

JavaScript:

Mostrar imagen del proyecto.

 _showProjectImage(e) { const btn = e.target.closest('.projects__maximize-btn'); if (!btn) return; const { id } = btn.dataset; const { image } = this._data.find(image => image.id === +id); this._projectBox = e.target.closest('.projects__box'); const markup = this._generateProjectImage(image); this._projectBox.insertAdjacentHTML('afterbegin', markup); }

Ocultar imagen del proyecto.

 _hideProjectImage(e) { const btnClose = e.target.closest('.btn__close-window'); if (!btnClose) return; this._projectBox.removeChild(this._projectBox.firstElementChild); }

Elemento HTML:

 _generateProjectImage(image) { return ` <div class="projects__window"> <div class="projects__window-content"> <button class="projects__window-close btn__close-window"> <svg class="projects__window-icon"> <use xlink:href="${icon}#icon-close" ></use> </svg> </button> <div class="projects__window-box"> <img src="${image}" alt="" class="projects__window-image"> </div> </div> </div> `; }

CSS:

 .projects { &__window { position: fixed; inset: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 1000; animation: window-animate 300ms linear; } } @keyframes window-animate { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }