Question

因此，对于我的作业，我有一个网页，我输入一个数字并选择一个形状，所选形状的选定数量将出现并通过一组动画。动画结束后，我需要让形状消失。我已经尝试了一切，包括使用remove（）动作，仍然无法想出这个。

所以这是我的小提琴：https://jsfiddle.net/o6e2yu5b/2/

这是javascript代码：

draw = function() {
  var typed = $('#howmany').val()
  var shape = $('#shape').val()
  var x, y;

  for (var i = 0; i < typed; i++) {
    x = Math.random() * 350
    y = Math.random() * 350
    if (shape == 'a') {
      pattern = paper.circle(25, 25, 25)
    }
    if (shape == 'b') {
      pattern = paper.rect(10, 10, 50, 50)
    }
    if (shape == 'c') {
      pattern = paper.path('M25,0 L50,50, L0,50 Z')
    }

    color_attr = {
        'fill': '#BB7'
    }

    position_attr = {
      'transform': 't' + x + ',' + y
    }

    pattern.attr(color_attr)
    pattern.animate(position_attr, 2000)
        onComplete:function() {
        this.target.remove();
    }
  }
}

setup = function() {
  paper = Raphael('svg1', 400, 400)
  $('button').click(draw)
}
jQuery(document).ready(setup)

请帮忙！感谢

Answer 1

看起来您的onComplete函数不正确且无法正常工作。所以我创建了一个新的setTimeout函数，它将在动画完成后删除生成的shape / s。查看此演示https://jsfiddle.net/o6e2yu5b/3/

setTimeout(function(){
  SVG.find("circle").remove();
  SVG.find("rect").remove();
  SVG.find("path").remove();
}, 2000);

动画后删除SVG元素

1 个答案: