Usando HTML, CSS y VanillaJS, implementé un calendario, similar al que se muestra al hacer clic en la hora en la esquina inferior derecha de una PC con Windows.

Al hacer clic en las flechas giratorias, estoy cambiando entre meses. Quiero agregar una animación a esto, de modo que los días del calendario se traduzcan a la derecha / izquierda y luego desaparezcan. Para este propósito, he agregado esta pequeña animación de fotogramas clave a mi CSS:

 .calendar__days.moveToRight { animation: moveToRightFadeOut 1s linear; } @keyframes moveToRightFadeOut { 100% { transform: translateX(10%); opacity: 0; } }

En mi archivo Javascript, al agregar los oyentes de clics a mis flechas giratorias, también estoy agregando la clase "moveToRight" a mi "calendar__days"-div:

 addArrowEventListeners() { this.calendarElements.arrowRight.addEventListener('click', () => { this.calendarElements.calendarDays.classList.add("moveToRight"); this.date.setMonth(this.date.getMonth() + 1); this.renderCalendar(); }); }

Esto funciona bien, pero desafortunadamente solo por primera vez hago clic en la flecha giratoria. Sé que tengo que eliminar la clase nuevamente para que funcione cada vez que hago clic en la flecha giratoria. Pero quitarlo justo después de agregarlo no produce ningún efecto. También he intentado usar un tiempo de espera:

 setTimeout(this.calendarElements.calendarDays.classList.remove("moveToRight"), 2000);

Esto tampoco funciona. ¿Alguien tiene una idea de cómo lograr esto?