5

我正在尝试使用 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/

4

3 回答 3

2

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

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

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

（更新的演示）

顺便说一句，您可以省略该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);

（演示）

于 2013-09-09T22:34:54.890 回答
1

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

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

您可以在不为其分配 ID 的情况下附加圆圈。

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

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

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

当需要删除圈子时，您将删除最旧的圈子，它将排在队列中的第一个。

$(".circle:first-child").remove();
于 2013-09-09T22:35:09.430 回答
1

尽管这篇文章很旧，但如果有人仍然像我一样到达这里，这里是 CSS 唯一的解决方案。

.circle {  
  width: 150px;
  height: 150px;
  border-radius: 50%;  
  position: absolute;
  top: 30px;
  left: 30px;
  background:rgba(24,145,255, 1);
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-name:circle;
  opacity:0;
}

.circle2 {  
    animation-delay:1.5s;
}

.circle3 {
    animation-delay:3s;
}
.circle4 {
    animation-delay:4.5s;
}

@keyframes circle {
  0%   {  
  -webkit-transform: scale(0.05);
  opacity:1;
  }  
  100%{  
  -webkit-transform: scale(1);
  opacity:0;
  } 
}
<div class='circle circle1'></div>
<div class='circle circle2'></div>
<div class='circle circle3'></div>
<div class='circle circle4'></div>

于 2022-01-28T05:43:45.007 回答