Всплывающее модальное окно на JavaScript

Общее
1

Написал маленький код на JS чтобы всплывающее окно с картой появлялось на странице
по щелчку на ссылку:
HTML:
a class=“map” ><img…></a
div class=“modal-content-map”>
button class=“modal-content-close close-map” type=“button” title=“Закрыть”>Закрыть</button
/div>

CSS: @keyframes fadein {
0% { transform: translateX(-1000px);
opacity: 0; }
100% {transform: translateX(0);
opacity: 1; }
}
@keyframes fadeout {
0% { transform: translateX(0);
opacity: 1; }
100% {transform: translateX(1000px);
opacity: 0; }
}

.modal-content-map {
display: none;
…
…
}
.show-map {
display: block;
animation-name: fadein;
animation-duration: 1s;
animation-timing-function: ease-out;
}
.fadeout-map {
display: block;
animation-name: fadeout;
animation-duration: 1s;
animation-timing-function: ease-in;
opacity: 0;
}

JS:
var showmap = document.querySelector(".map");
var popup = document.querySelector(".modal-content-map");
var close = popup.querySelector(".modal-content-close");

showmap.addEventListener(“click”, function (event) {
event.preventDefault();
popup.classList.add(“show-map”); });

close.addEventListener(“click”, function (event) {
event.preventDefault();
popup.classList.remove(“show-map”);
popup.classList.add(“fadeout-map”); });

При щелчке на карту(a .map), модальное окно всплывает слева направо и показывает подключенную гугл карту, при нажатии на крестик окно с картой уплывает направо и исчезает, но если второй раз нажимаю на карту(a .map) то модальное окно не появляется из-за добавленного класса . fadeout-map. ВОПРОС1: как сделать чтобы можно было много раз нажимать на ссылку и модальное окно появлялось и уплывало?
Конечно, можно убрать последнюю строчку в JS : popup.classList.add(“fadeout-map”); , но тогда окно не будет уплывать направо , а просто исчезнет.
ВОПРОС2: пытаюсь самостоятельно решить, не получается.где ошибка в условии, почему оно не работает?

showmap.addEventListener(“click”, function(event) {
if (popup.classList.contains(“fadeout-map”)) {
event.preventDefault();
popup.classList.remove(“fadeout-map”);
} else {
popup.classList.add(“show-map”);
}

2

Вместо classList.remove и classList.add попробуйте classList.toggle.
И я еще раз напоминаю, что свой код гораздо удобнее демонстрировать в песочницах.
А то получается не понятно что:

3

после долгих поисков в интернете наконец нашел решение, просто убрать ненужный класс после завершения анимации:

function closeMap() {
popup.classList.remove(“fadeout”);
}
popup.addEventListener(“animationend”, closeMap, false);