如何保存原始div位置（）以供以后使用？

Question

我目前正在使用GSAP JS库运行动画序列。

运行第一个动画实例后，我运行一个onComplete函数，保存#myDiv的当前position()

然后我尝试在动画的最后一个实例中使用coordX值，但它只是变为： 无效的左补间值：undefined

有任何想法吗？

var coordX;

function regPosition() {
    coordX = $("#mydiv").position().left;
}

function animationStart() {
    //Initiate animation with onComplete
    tl.to("#mydiv", 0.5, {borderRadius:"50%", width: "35%", onComplete: regPosition})

    //Move #myDiv to another position than registered    
    .to("#mydiv", 0.5, {left: 1000})

    //try to use the original position stored in "coordX"
    .fromTo("#mydiv", 1.5, {left:-800}, {left:coordX});
}
animationStart();

Answer 1

直到在第一个.to完成后实际调用onComplete ， coordX设置coordX的值。 在此之前，该值undefined 。

所以问题是在定义时 ， coordX的值是undefined ，这是你要分配给left的值。 因此，当评估该.to时，它会看到undefined值。

也许更好的方法是在onComplete启动反向动画：

function animationStart() {
    tl.to("#mydiv", 0.5, {
        borderRadius:"50%", 
        width: "35%", 
        onComplete: function() {
            var coordX = regPosition();
            tl.to("#mydiv", 0.5, {left: 1000})
              .fromTo("#mydiv", 1.5, {left:-800}, {left: coordX});
        }
    })
}

Answer 2

您的代码在时序方面存在一些逻辑问题。 执行每个步骤需要一些时间，在完成所有步骤之前，不会调用onComplete函数。 不要使用onComplete回调，只需在启动动画之前保存coordX ，并在完成后使用它。

Answer 3

创建一个变量，保存位置介绍并稍后使用..我更喜欢.offset（）...