當切換到基于 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;
uj5u.com熱心網友回復：
當 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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/462463.html
上一篇：具有彎曲形狀的SVG條紋影片