Framer motion whileInView 在移动设备上无法正确设置动画

Question

当切换到基于 android 的设备的移动视图或使用基于 chromium 的移动模拟器时，动画将在您向下滚动视图之前处于完成状态。
此问题不会出现在 Safari 或桌面视图中。

安装组件后出现在屏幕外的网站上使用的示例代码。

                <motion.div
                    variants={slideLeft(false)}
                    initial="initial"
                    whileInView="animate"
                    exit="exit"
                    transition={{ duration: 0.5 }}
                    viewport={{ once: true }}
                >

使用的动画变体

/**
 * @param {boolean} cont default: true
 * @param {boolean} exit default: true
 * @param {string} customVal default: %
 * @return {import("framer-motion").MotionProps}
 */
const slideLeft = (cont = true, exit = true, customVal = "%") => {
    /**
     * @type {import("framer-motion").MotionProps}
     */
    const output = {
        initial: {
            x: `100${customVal}`,
        },
        animate: {
            x: 0,
        },
        exit: {
            x: `-100${customVal}`,
        },
    };
    if (!cont) output.exit = { x: `100${customVal}` };
    if (!exit) delete output.exit;
    return output;
};
export default slideLeft;

Answer 1

当 x-axis（设备的 right-hand 侧）发生溢出时会出现此问题。
可以通过应用此 CSS 样式来修复。 overflow-x: hidden;

html,
body,
#root {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    /* Prevents overflow on the x-axis */
    overflow-x: hidden;
}

Framer motion whileInView 在移动设备上无法正确设置动画

Framer motion whileInView not animating correctly on mobile

reactjs

animation

css-animations

framer-motion