CSS трансформирует ходы обработчик кликов?

Question

Я склонен использовать следующий SCSS @mixin для эффекта анимации, чтобы пользователи знали, что является интерактивным в моих проектах.

@mixin clickAnimation($opacity: 0.5, $distance: -1px, $time: 75ms) {
  opacity: 1;
  transition: $time ease;
  cursor: pointer;
  &:hover {
    transform: translateY($distance);
    opacity: $opacity;
  }
  &:active {
    transform: translateY(2px);
  }
}

Я буду использовать его на сайте следующим образом:

a:not(.disabled) {
  @include clickAnimation();
}

Недавно я заметил странную проблему с этим.

Еслипользователь наводит элемент <a> на нижнем пикселе <a>, <a> преобразуется до -1px.Когда пользователь щелкает <a>, выполняется состояние :active css (в данном случае перевод до 2px), но действие щелчка не регистрируется.Поэтому никакие обработчики щелчков не сработают, и никакие ссылки не вызовут перенаправлений.

Кто-нибудь имел эту проблему раньше и знает, что я мог бы сделать, чтобы ее исправить?

По запросу, вот скрипка, котораядемонстрирует проблему: https://jsfiddle.net/bf9yk0tn/

Answer 1

Очевидно, DOM теряет отслеживание элемента с момента его перемещения из исходного положения, и в момент нажатия кнопки ничего не происходит (хотя каким-то образом он управляет наведением курсора).

Вы можете пойти на такой обходной путь, чтобы заполнить пустоту, но я не уверен, что это лучшее решение.

a:hover::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: 100%;
}

Вот обновление jsfiddle