为什么我的脚本运行有动画，但没有显示？

Question

我想在一条线上做一个简单的动画。这里的基本目标是，当我单击 canvas 时，该线从一个点变为一定数量的像素高。然而，当我点击 canvas 时，脚本显示动画开始和完成（最后调用回调函数），但我实际上并没有看到动画发生。谁能告诉我为什么？

函数创建每个动画行，将其附加到文档，并设置样式

function animatedLine(name, x1, y1, width, height, stroke, duration){
    this.name = name;
    this.x1 = x1;
    this.y1 = y1;
    this.stroke = stroke;
    this.width = width;
    this.height = height,
    this.duration = duration;

    $("body").append("<div id='" +this.name +"'></div>");
    $("#" +this.name).css({"position": "absolute", "top": this.y1 +"px", "left": this.x1 +"px", "backgroundColor": this.stroke, "width": this.width +"px", "height": this.y1 +"px", "z-index": 5});
}

创建一个新的 animatedLine 对象

var line1 = new animatedLine("R01", 0, 0, 5, 100, "black", 3);

创建时间线

var timeline = new TimelineLite();

创建时间轴动画，这显然是因为正在调用 onComplete 函数

timeline.to(line1, line1.duration, {"height": line1.height +"px",
    onComplete: function(){

动画完成后，"hello" 会打印到控制台

        console.log("hello");
    }
});

$("#schematic_holder").on("click", function(){
    timeline.play();
})

需要注意的是，背景是一个 canvas 元素，它的位置设置为绝对位置，z-index 设置为 0，所以该行应该在 [=33= 之上分层]，它正在做的事情。

Answer 1

您正在补间 line1（创建 #R01 元素的 AnimatedLine "class"）。

您要补间的是#R01（div 元素）。

function animatedLine(name, x1, y1, width, height, stroke, duration){
  this.name = name;
  this.x1 = x1;
  this.y1 = y1;
  this.stroke = stroke;
  this.width = width;
  this.height = height,
  this.duration = duration;

  $("body").append("<div id='" +this.name +"'></div>");
  $("#" +this.name).css({
    "position": "absolute",
    "top": this.y1 +"px",
    "left": this.x1 +"px",
    "backgroundColor": this.stroke,
    "width": this.width +"px",
    "height": this.y1 +"px",
    "z-index": 5
  });

}

var line1 = new animatedLine("R01", 0, 0, 5, 100, "black", 3);

var timeline = new TimelineLite();

timeline.to("#R01", line1.duration, {
  "height": line1.height +"px",
  onComplete: function(){ console.log("hello"); }
});

timeline.play();

body{ background-color: ivory; }

<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

为什么我的脚本运行有动画，但没有显示？

Why is my script running the animation, but not showing it?

javascript

animation

canvas

为什么我的脚本 运行 有动画，但没有显示？

Why is my script running the animation, but not showing it?

javascript

animation

canvas

为什么我的脚本运行有动画，但没有显示？