프레이머 모션의 스크롤 보간을 사용하는 justifyContent에 대한 팁
P粉238433862
2023-08-31 18:42:45
<p>x 값 사이에서 애니메이션을 적용하는 코드 조각이 있지만 justify-content: 중앙에서 왼쪽으로 전환하려고 하면 작동하지 않습니다. </p>
<p>다음은 코드 조각입니다. </p>
<pre class="brush:php;toolbar:false;">function Navbar() {
const { scrollY } = useScroll();
const x = useTransform(scrollY, [0, 100], ["가운데", "왼쪽"]);
반품 (
<motion.div
공들여 나열한 것
className={styles.parent}
스타일={{ justifyContent: x, 디스플레이: "flex"
전환={{
지속시간: 0.5
}}
>
<이미지
src="/BlackLogo-2.svg"
alt="Cg 로고"
너비={100}
높이={100}
스타일={{패딩: 20,}}
우선 사항
/>
</motion.div>
)
}</pre></p>
해결책을 찾았습니다. useMotionValueEvent 함수를 사용하여 스크롤이 특정 지점을 지나갔는지 확인하고 이를 상태로 설정한 다음 하위 요소(내 이미지)를 Motion.div로 래핑하고 아래와 같이 외부 div에 클래스를 설정해야 합니다. :
으아악