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

Question

我设法通过使用::after 选择器获得以下按钮动画(参​​见代码)。但是，我希望它以相反的方式发生。

我的按钮的初始状态应该只是图标绿色，然后动画应该发生并且按钮应该回到其初始状态。就按钮颜色而言，我正在尝试的是:

1st before click:绿色按钮，没有粉色背景

点击后第二次:动画开始，按钮变为紫色，背景为粉红色

点击后第 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>

P.S.:我使用 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