使用CSS和Javascript辐射圆效果

Question

我正在尝试使用CSS和Javascript创建辐射圆效果。我的想法是每隔一段时间创建一个新的圆圈副本，然后在几秒钟后删除它们。

它可以在几秒钟内正常工作，但之后似乎圈子被移除得太快，因为它们不会放射超过一会儿。

发生了什么事？有没有更好的方法来实现我在前几秒获得的效果？

CSS

.circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 3px solid #000;
  -webkit-transition: all 2s linear;
  -webkit-transform: scale(0.1);
  position: absolute;
  top: 0;
  left: 0;
}

.circle.zoom {
  opacity: 0;
  -webkit-transform: none;
}

的Javascript

counter = 0;

function createCircle(){
  // Circle ID  
  var circleID = "circle_" + counter;

  // Add circle to document
  $("body").append("<div class='circle' id='" + circleID + "'></div>");
  $thisCircle = $("#" + circleID);

  // add "zoom" class
  setTimeout(function(){
      $thisCircle.addClass("zoom");
  },10);

  // Remove circle
  setTimeout(function(){
      $thisCircle.remove();
  },3000);
  counter++;
}

setInterval(function(){
    createCircle();
},500);

JSFiddle演示：http://jsfiddle.net/YaKBH/9/

Answer 1

您忘了将$thisCircle变量设置为闭包范围的局部变量，它是一个隐式全局变量。 3秒后，它将开始删除当前圆圈（已设置为500毫秒的动画）。圈子0到4将留在DOM中，opacity: 0。

要解决此问题，只需添加另一个var keyword：

  var $thisCircle = $("#" + circleID);

（updated demo）

---

顺便说一句，您可以省略counter变量并直接引用刚刚创建的元素：

setInterval(function createCircle() {
    var $thisCircle = $("<div class='circle'></div>").appendTo("body");
    // add "zoom" class with minimal delay so the transition starts
    setTimeout(function () {
        $thisCircle.addClass("zoom");
    }, 0);

    // Remove circle
    setTimeout(function () {
        $thisCircle.remove();
    }, 3000);
}, 500);

（demo）

Answer 2

这是一个更好的解决方案。 CSS为您提供了允许您完全放弃计数器的选择器。

http://jsfiddle.net/YaKBH/13/

您可以在不指定ID的情况下附加圆圈。

$("body").append("<div class='circle'></div>");

由于您想要缩放刚刚添加的圈子，因此当您查询圈子时，它将是最后一个圈子。

$(".circle:last-child").addClass("zoom");

当需要移除圆圈时，您将移除最早的圆圈，该圆圈将首先排在队列中。

$(".circle:first-child").remove();