javascript - 将精确的动画从桌面转换为手机（FRAMER API）

Question

所以我遇到了奇怪的问题。所以我正在使用带有 FRAME API 的 React 和动画页面。所以我在做什么：在特定的 ScrollY 上，比如说 900，会弹出一些动画。但是，当有一个 flexbox 时，它在手机上看起来会有所不同（一行中的一个元素，而在桌面上则有一行中的 4 个元素）。因此，桌面和手机上的确切位置将不匹配，从而导致动画弹出不及时。

是否有人遇到过同样的问题，如果是，是否有解决方案？

Answer 1

对我有用的是在父元素上设置一个固定高度，一个用于移动设备，一个用于桌面设备。然后，您可以使用三元组设置动画本身。

示例动画：

const title = {
  hidden: {
    opacity: 0,
    y: mobile ? -350 : -250,
  },
  show: {
    opacity: 1,
    y: mobile ? 300 : 200,
  },
};