为什么我的脚本运行动画，但不显示？答案

【问题标题】：Why is my script running the animation, but not showing it?为什么我的脚本运行动画，但不显示？
【发布时间】：2015-03-26 17:35:18
【问题描述】：

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

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

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();
})

需要注意的是，背景是一个画布元素，它的位置设置为绝对值，z-index 设置为 0，因此线条应该在画布顶部分层，它正在这样做。

【问题讨论】：

欢迎来到 SO，您介意编辑您的问题并将大写更改为小写吗？
@Huangism 确定。我这样做只是为了发表评论，但意识到现在是多余的。

标签： javascript animation canvas

【解决方案1】：

您正在补间 line1（创建#R01 元素的 AnimatedLine “类”）。

您想要补间的是#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>

【讨论】：