无法使用 GSAP 定位对象

Can't position objects with GSAP

本文关键字：定位 对象 GSAP      更新时间：2023-09-26

我正在从他们的文档中获取真正简单的例子，我重新调整照片的大小和位置。 重新调整大小的部分工作正常，但不会重新定位。这是我的代码： 

<head>
<meta charset="UTF-8">
<title>animate</title>
<style type="text/css">
    #test { width: 100px; height: 100px; background-color: #f72; }
</style>
    <!--CDN link for the latest TweenMax-->
**<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>**
</head>
<body>
    **<div id="test"></div>
    <img id="photo" src="Putin.jpg">**
<script>
    **var photo = document.getElementById("photo"); 
    TweenLite.to(photo, 2.5, {width:100});  // this works
    TweenLite.to(photo, 4, {left:300});   // this does nothing
    var thing = document.getElementById('test');
    TweenLite.to(thing, 1, {left:200});   // this does nothing
    TweenLite.to(thing, 1, {top:100});    // this does nothing**
</script>
</body>

你可以在这里运行它：http://www.jimslounge.com/gsap_test/

更新：

我总是等到窗口加载完毕后再执行依赖于外部库的代码：

window.onload = function(){
    var photo = document.getElementById("photo"); 
    TweenMax.to(photo, 4, {x:300});
}

其次，您正在加载 TweenMax 库，因此您需要使用 TweenMax 而不是 TweenLite

。

第三，除了不太确定在不对填充或边距进行动画处理时是否需要将块定义为绝对位置之外，您绝对应该传递 x 而不是 left 属性

TweenMax.to(photo, 4, {x:300});
试

一试，让我知道这是否有帮助

在此处查看工作示例：http://jsfiddle.net/Hitbox/QbyCU/1/

相关文章：