javascript - 在 GreenSock 中堆栈 "transform: translateY"值？

Question

我刚刚发现了这个很棒的产品，并意识到这正是我所需要的!我有一个巨大的图像，是窗口大小的 x 倍，所以我想在单击按钮时滚动到它的最底部。我会像这样使用 CSS:

@keyframes {
    to {
        transform: translateY(-100%) translateY(100vh);
    }
}

这被证明是 CSS 中的跨浏览器方式，而不是:

transform: translateY(calc(-100% + 100vh));

有什么方法可以用 TweenMax 做到这一点吗？我确实知道我可以以像素为单位计算这些值并明确指定它们:

var value = -$('img').height() + $(window).height();
var tweenDown = TweenMax.to("img", 5, {y: value});

然而，“堆叠”方式的优势在于，当您调整窗口大小时，它会将图像保持在同一位置。

提前致谢!

Answer 1

这是我为那些想知道的人想出的:

TweenMax.to('img', 5, {
  transform: 'translate3d(0,100vh,0)',
  percentY: -100
});