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});

然而＆＃34;堆积＆＃34;的优势方法是当你调整窗口大小时，它会将图像保持在相同的位置。

提前致谢！

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

从上述情况来看，

我认为将100vh的{{1}}添加到css y属性中将被解释为100px。为了使它完全起作用，我选择了以下内容：

matrix