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 に答える