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

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

本文关键字：显示 动画 脚本 我的 运行 为什么      更新时间：2023-09-26

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

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

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(){

动画完成后，"你好"将打印到控制台

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

需要注意的是，背景是一个画布元素，它的位置被设置为绝对，z索引被设置为0，所以这条线应该在画布上分层，它正在这样做。

您正在对line1（创建#R01元素的AnimatedLine"class"）进行tweening。

您想要转换的是#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>

相关文章：