Анимация кнопки с помощью :: после селектора

Question

Мне удалось получить следующую анимацию кнопки (см. Код) с помощью селектора :: after. Однако я бы хотел, чтобы это произошло наоборот.

Исходное состояние моей кнопки должно быть просто зеленым значком, а затем должна начаться анимация, и кнопка должна вернуться в исходное состояние. Что касается цветов кнопок, то я пытаюсь:

1-й до нажатия: зеленая кнопка без розового фона

2-й после нажатия: анимацияпроисходит, кнопка становится фиолетовым, а розовый фон показывает

3-й сразу после нажатия: зеленая кнопка без розового фона снова

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

.container {
  margin-top: 20px;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

.icon {
  transition: all .2s;
  color: purple;
  background-color: transparent;
  border-radius: 100px;
  padding: 10px;
  cursor: pointer;
  display: inline-block;
  position: relative;

  > i {
    position: relative;
    z-index: 10;
  }

  &::after {
    content: "";
    background-color: pink;
    display: inline-block;
    height: 100%;
    width: 100%;
    border-radius: 100px;
    position: absolute;
    top: 0;
    left: 0;
    transition: all .4s;
  }

  &:active,
  &:focus { 
    color: green;

    &::after {
      transform: scale(1.5);
      opacity: 0;
    }
  }
}

<div class="container">
  <a href="#" class="icon"><i class="fa fa-map"></i></a>
</div>

PS: я использую SCSS в качестве препроцессора CSS.

Если вам проще, вот мой CodePen : https://codepen.io/fergos2/pen/xxxpjLa?editors=1100

Answer 1

Нажатие на элемент, дает ему фокус. Если вы щелкнете по нему еще раз, он будет фокусироваться на элементе, поэтому его внешний вид не изменится, если вы не нажмете что-то за пределами элемента. Если бы вы могли, я бы использовал vanilla javascript или jquery для переключения класса, который имеет эти визуальные изменения. В приведенном ниже примере добавлен класс green, который добавляет визуальные изменения.

С Vanilla JS:

    var icon = document.querySelector(".icon");

    icon.addEventListener( 'click', function(){
      icon.classList.toggle("green");
    });

С jQuery:

    $('.icon').click(function(){
        $(this).toggleClass('green');
    })

Вот кодекс: https://codepen.io/bjorniobennett/pen/dyyJjyW