使用:: after选择器为按钮设置动画

Question

我设法通过:: after选择器获得了以下按钮动画（请参见代码）。但是，我希望发生这种情况。

我的按钮的初始状态应该只是绿色的图标，然后进行动画处理，并且按钮应返回其初始状态。就按钮颜色而言，我正在尝试的是：

单击前第一：无粉红色背景的绿色按钮

单击后第二次：发生动画，按钮变为紫色和粉红色背景显示

单击后第三右：再次没有粉红色背景的绿色按钮

目前正在发生的事情是相反的。我想知道你们是否可以告诉我我在做错什么，以及我应该怎么做才能达到我想要的效果。

.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>

P.S .：我正在使用SCSS作为CSS预处理程序。

如果您发现更简单，这是我的CodePen：https://codepen.io/fergos2/pen/xxxpjLa?editors=1100

Answer 1

单击元素，将其赋予焦点。如果再次单击它，它将继续为元素提供焦点，因此除非您单击元素外部的内容，否则外观不会改变。如果可以的话，我将使用香草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