Framer motion whileInView 在移动设备上无法正确设置动画
Framer motion whileInView not animating correctly on mobile
当切换到基于 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;
当 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;
}
当切换到基于 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;
当 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;
}