Question

我正在使用TweenMax基于滚动位置进行动画制作。我要设置动画的位置取决于屏幕尺寸。可以根据屏幕的宽度进行可变的更改吗？

我还很新，并且使用了很多复制/粘贴解决方案。我有两个彼此相邻的矩形div，它们像卡片一样翻转以在背面显示信息。在移动屏幕上查看时，这些卡垂直堆叠而不是彼此堆叠。然后，这会更改我要为卡片翻转设置动画的位置。

我找到的解决方案是根据媒体查询更改var sceneStart。这只是解决问题的一个主意。

这是我没有成功的尝试。

var sceneStart2;
if (window.matchMedia("(max-width: 480px)")) {
  sceneStart2 = 3500
} else {
  sceneStart2 = 2000
}

当div并排放置时，预期结果在大屏幕上显示，card2在2000处翻转，而在移动屏幕上在3500处翻转。

实际结果是它完全破坏了翻盖并且无法正常工作。

Answer 1

您需要检查matches返回的MediaQueryList的{{1}}属性：

matchMedia

查看this article on MDN以获得有关var sceneStart2; if (window.matchMedia("(max-width: 480px)").matches) { sceneStart2 = 3500 } else { sceneStart2 = 2000 } console.log(sceneStart2);的更多信息。

如果您希望在调整窗口大小时进行更新，则可以将此逻辑移到最初在每次窗口调整大小事件中调用的函数中：

matchMedia

如何根据屏幕宽度定义变量？

1 个答案: