Javascript 堆栈"；转换：translateY“；格林斯托克的价值观？

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

然而，“堆叠”方式的优点是，当您调整窗口大小时，它会使图像保持在相同的位置

---

提前谢谢

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

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

---

[我的解决方案到底是什么] 事实上，对于当前版本的GSAP，我认为这将是

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

但是，“关于转换的注释”文档部分说

要进行基于百分比的翻译，请使用xPercent和yPercent（在版本1.13.0中添加），而不是通常基于px的x或y

综上所述,

我认为

100vh

for

y

在css

matrix

属性中添加时将被解释为

100px

。为了充分发挥作用，我选择了以下几点：

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

---

我可能错了，但我想你要找的是

yPercent

。请看一看首次引入此属性时的这篇旧文章：。