프레이머 모션의 스크롤 보간을 사용하는 justifyContent에 대한 팁
P粉238433862
P粉238433862 2023-08-31 18:42:45
0
1
440
<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>
P粉238433862
P粉238433862

모든 응답(1)
P粉293341969

해결책을 찾았습니다. useMotionValueEvent 함수를 사용하여 스크롤이 특정 지점을 지나갔는지 확인하고 이를 상태로 설정한 다음 하위 요소(내 이미지)를 Motion.div로 래핑하고 아래와 같이 외부 div에 클래스를 설정해야 합니다. :

으아악
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿