Проблема заключается в том, что при быстрых кликах на кнопку, очередные вызовы функции `translateY()` начинаются еще до того, как завершится предыдущая анимация (и соответственно, "transitionend" не успевает сработать). Это приводит к созданию множества слушателей события transitionend на одном элементе, что затрудняет правильную работу анимации при последующих кликах.

Для решения этой проблемы можно добавить проверку наличия класса "translate" на элементе, перед добавлением его на кнопку. Если класс уже присутствует, то следует пропустить выполнение функции и не добавлять новый слушатель события transitionend:

function translateY(e) {
  if (!e.classList.contains('translate')) {
    e.classList.add('translate');
    e.addEventListener('transitionend', function handler() {
      e.classList.remove('translate');
      e.removeEventListener('transitionend', handler);
    });
  }
}

В этом коде мы проверяем, не содержится ли наш элемент класса "translate" перед добавлением этого класса. Далее, если класса нет, то мы добавляем слушатель события transitionend, и при завершении анимации удаляем слушатель и удаляем класс "translate" с элемента.

Такой подход обеспечивает правильную работу анимации при быстрых кликах на кнопку.

Отмечу, что в целом, использование js для реализации простой анимации как в данном примере может считаться избыточным. В большинстве случаев, на такие анимации можно обойтись использованием только css (как вы и отметили, через псевдоклассы, например :active).

В компоненте EventPostForm.vue, измените строку, которая отправляет данные на сервер, на следующую строку:

this.$store.dispatch(actionTypes.addEvent, this.$route.params.id, {
  title: this.title,
  description: this.description,
  startDate: this.startDate,
  endDate: this.endDate
}).then(event => {
  console.log(event);
  this.$router.push({ name: "editUser" });
});

Здесь store dispatch вызывает новое действие `addEvent`. Это действие принимает два аргумента: `context` и `payload`. `context` - это объект контекста, который хранит методы, геттеры, мутации и действия store. `payload` - это объект, содержащий данные, которые должны быть отправлены на сервер. В данном случае, он передает параметры события: заголовок, описание, дату начала и дату окончания.

Кроме того, измените метод `addEvent()` файла events.js следующим образом:

const addEvent = (id, credentials) => {
  return axios.post(`/user/${id}`, credentials);
};

export default { getEvents, addEvent };

Здесь просто исправлено неправильное использование одинарных кавычек при указании URL запроса в фактическое использование обратных кавычек.

После внесения этих изменений форма должна отправлять данные на сервер.

Спустя 2 часа поисков нашел эту статью, может кому пригодиться