框架运动whileInView在移动设备上没有正确的动画

Question

当切换到基于android的设备的移动视图或使用基于铬的移动仿真器时，在向下滚动视图之前，动画将处于完全状态。

此问题不会出现在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轴(设备的右侧)出现溢出时，就会出现此问题.

可以通过应用此CSS样式来修复。overflow-x: hidden;

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