是否在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
});

Answer 2

[我的解決方法]實際上，對於當前版本的GSAP，我認為這是

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

但是，“有關轉換的說明”文檔部分說

要進行基於百分比的翻譯，請使用xPercent和yPercent（在1.13.0版中添加），而不是通常基於px的x或y

從以上判斷，

我認為y 100vh在css matrix屬性中添加時將解釋為100px 。 為了使此功能完全起作用，我選擇了以下選項：

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