使用 CSS 和 Javascript 的辐射圆效果答案

【问题标题】：Radiating circle effect using CSS and Javascript使用 CSS 和 Javascript 的辐射圆效果
【发布时间】：2022-01-28 13:51:56
【问题描述】：

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

【问题讨论】：

你需要什么浏览器支持
Chrome、Firefox、Safari、IE 10+。
貌似和remove circle函数有关。如果您将 settimeout 更改为从 3000 到 30000，则在更长的时间内看起来会更好。
哦，是的，这一定是问题所在。它工作 3 秒，超时时间为 3000 毫秒。但我试图只针对刚刚创建的要删除的元素，而不是全部。
这就是我增加计数器变量的原因 - 以创建唯一 ID 并仅删除该圆形元素。

标签： javascript css css-animations

【解决方案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)

【讨论】：

完美！非常感谢。
@PortlandRunner：我不明白。如果你不删除圆圈而是每半秒添加一次，它们会堆积在 DOM 中 - 不可见但分配内存？这就是我所说的泄漏……
@Bergi - 一旦我意识到这是多么愚蠢，我就删除了我的评论......感谢您的帮助

【解决方案2】：

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

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

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

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

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

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

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

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

【讨论】：

我正在添加 ID，以便我可以定位它，并且只有它，以便在三秒钟后删除。如果 append() 允许回调，则没有必要，但我认为不需要。
您可以在没有 ID 的情况下定位它，因为您有最后一个子选择器和第一个子选择器，而且您知道事实上您不会删除中间某处的圆圈。跨度>

【解决方案3】：

尽管这篇文章很旧，但如果有人像我一样到达这里，这里是 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>

【讨论】：