javascript - 单击时用颜色从中心填充圆形 Div

Question

我有一个类为“complete-button”的“圆形”div(高度/宽度=27px，边框半径=12px)。我想在单击时更改此 div 的背景颜色，从中心开始并逐渐向外扩展。

执行此操作最有效的方法是什么？我已经看到一些帖子使用 css on-hover(使用前后选择器)完成此操作，但我还不够聪明，无法将这个想法转换为 jQuery on-click。任何帮助将不胜感激!

Answer 1

使用这个 CSS:

div.button:after {
  content: '';                 /* needed for rendering */
  position: relative;          
  display: block;              /* so we can set width and height */
  border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */
  background: red;
  top: 50%;                    /* center vertically */
  transform: translateY(-50%); /* center vertically */
  transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}

然后点击切换selected类。

片段

$('div').click(function() {
  $(this).toggleClass('selected');
});

div.button {
  height: 27px;
  width: 27px;
  border-radius: 50%;
  background: green;
}

div.button:after {
  content: '';                 /* needed for rendering */
  position: relative;          
  display: block;              /* so we can set width and height */
  border-radius: 50%;
  height: 0%;
  width: 0%;
  margin: auto;                /* center horizontally */
  background: red;
  top: 50%;                    /* center vertically */
  transform: translateY(-50%); /* center vertically */
  transition: 1s;
}

div.button.selected:after {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button">

</div>