我正在使用 React、framer-motion 和 react-intersection-observer 構建一個應用程式。在animation.js 中，我有一個函式，它被匯入到App.js 中并用作App.js 中的組件。
我想使用樣式作為引數對某些 div 應用縱橫比，但它不起作用。
<FadeAnimation name={'project-image--image'} style={'--ratio':16/9} />
Failed to set an indexed property on 'CSSStyleDeclaration': Indexed property setter is not supported.
我有其他具有此屬性的 div 并且它們顯示正確
<div className='project-image--image' style={{'--ratio':1/2}}/>
影片.js
export const container = {
hidden: { opacity: 0, y: 5 },
visible: { opacity: 1, y: 0 }
}
function FadeAnimation({ children, name, delay, duration, style }) {
const controls = useAnimation();
const [ref, inView] = useInView();
useEffect(() => {
if (inView) {
controls.start("visible");
}
}, [controls, inView]);
return (
<motion.div className={`${name}`} style={{`${style}`}}
ref={ref}
animate={controls}
initial="hidden"
transition={{ duration: duration, delay: delay }}
variants={{
visible: { opacity: 1, y: 0 },
hidden: { opacity: 0, y: 5 }
}}
>
{children}
</motion.div>
);
}
uj5u.com熱心網友回復：
你有沒有嘗試過：
<FadeAnimation name={'project-image--image'} style={{'--ratio':16/9}} />
（添加另一個花括號）
然后，在FadeAnimationComponent使用它作為
<motion.div className={`${name}`} style={style} {/*...*/}/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/486012.html
標籤：javascript 反应