Почему мой сценарий запускает анимацию, но не показывает ее?

Question

Я пытаюсь сделать простую анимацию на линии. Основная цель здесь заключается в том, что когда я нажимаю на холст, линия идет от точки к определенному количеству пикселей в высоту. Однако, когда я нажимаю на холст, сценарий показывает, что анимация началась и завершилась (функция обратного вызова вызывается в конце), но на самом деле я не вижу анимацию. Может ли кто-нибудь сказать мне, почему?

Функция создает каждую анимированную линию, присоединяет его к документу, и задает стиль

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-index устанавливается равным 0, поэтому линия должна располагаться поверх холста, что он делает.

Answer 1

Вы tweening line1 (класс AnimatedLine ", который создал элемент # R01).

Что вы хотите подкрутить: # 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>