Question

考虑以下代码（未经测试，仅作为示例）：

const item = document.getElementById('test');

let value = 0;
let finalValue = 100;

TweenMax.fromTo(
    item,
    .2,
    { '--some-var': value },
    {
        '--some-var': finalValue
        onComplete: () => {
            value = finalValue;
        }
    }
);

上面的代码使用TweenMax（尽管TweenLite如果支持我需要的话，它会是首选...）来更新--some-var的{{1}} CSS属性。目前，我正在使用item将onComplete更新为动画的value，但是，理想情况下，我希望在补间的同时进行此操作。

换句话说，我希望Tween在运行时更新以下两个值：

{{1}中的finalValue
--some-var

我知道我可以传递item来定位，但是据我了解，这会将value变量设置为类似array的对象，而不仅仅是{{ 1}}。

有没有办法更新两个结构不同的对象？即一个是DOM节点（CSS更新），一个是简单变量...

Answer 1

这绝对是可能的。实际上，卡尔做了quick tip on how to do so。只要确保您对实际的变量（而不是调用它的元素）进行动画处理即可。

如果您需要更多帮助，请提供一个重现错误的最小代码示例。

如何使用GSAP Tween更新CSS和变量

1 个答案: