Question

我尝试使用 GSAP 进行第一次补间，即使我尝试使用示例代码也没有发生任何事情。

我有一个包含以下代码的php文件：

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<style>
  #green {
    width: 100px;
    height: 100px;
    background-color: #0D9C02;  
  }
</style>
</head>
<body>
<div id="green"></div>
<script type="text/javascript" src="js/greensock/plugins/CSSPlugin.min.js"></script>
<script type="text/javascript" src="js/greensock/TweenLite.min.js"></script>
<script>
  $(document).ready(function(){
    var logo = document.getElementById("green");
    TweenLite.to(logo, 1, {left:"600px"});
  });
</script>
</body>

我得到的只是一个静态的绿色方块。我必须遗漏一些基本的东西 - 但是什么？感谢。

Answer 1

简单的解决方案：在css中需要position: relative;才能工作。

Answer 2

缺少

val a = (for (id <- ids){ someTable.insert(SomeObject(id)) } yield ()).transactionally val f: Future[Unit] = db.run(a) css中的属性

Jsfiddle

默认情况下，HTML元素位于position。如果元素为static，则left属性无效。

Answer 3

您需要先创建一个TimeLine，您可以在其中附加补间。您可以使用TimelineLite或TimelineMax（两者之间略有不同）。

使用以下代码 -

Binding

Answer 4

元素需要具有相对，绝对或固定的位置值，以便能够将其移动到左值之间。我进一步建议不要补间左边的属性，而是补充x属性。因为x和y属性使用transform而不是更好的性能。

GSAP入门

4 个答案: