在 GreenSock 中堆叠 "transform: translateY" 个值？

Question

我刚刚发现了这个很棒的产品，并意识到这正是我所需要的！我有一个巨大的图像，是 window 大小的 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});

然而 "stacked" 方法的优点是当您调整 window 的大小时，它会保持图像在相同的位置。

提前致谢！

Answer 1

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

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

Answer 2

[我的解底] 实际上，对于当前版本的 GSAP，我认为这将是

TweenMax.to('img', 5, {
  y: '100vh',
  yPercent: -100
});

但是，'the notes about transforms' 文档部分说

To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based

根据以上判断，

我认为 y 的 100vh 在 css matrix 属性中添加时会被解释为 100px。为了使其充分发挥作用，我选择了以下内容：

TweenMax.to('img', 5, {
  y: window.innherHeight, // or $(window).heigth()
  yPercent: -100
});

Stack "transform: translateY" values in GreenSock?