리액트 호버 애니메이션은 방법이 없나요?

Question

리액트에서는 css로 transition을 넣을 수 없다고 들었어서...jsx에 그대로 집어넣어서 해결해보려고 했는데, 딱딱하게는 변화하는데 부드럽게 전환하려면 어떻게 해야할지 감이 안잡히네요ㅜfunction Menubar() { const [isHovering, setIsHovering] = useState(false); function handleMouseOver() { setIsHovering(true); } function handleMouseOut() { setIsHovering(false); } const barBackground = { position: 'fixed', left: '0', top: '0', width: '100%', height: '80px', backgroundImage: isHovering ? 'linear-gradient(to bottom, rgb(167, 170, 179,1), 80%, rgba(167, 170, 179,0))' : 'linear-gradient(to bottom, rgb(167, 170, 179,1), 50%, rgba(167, 170, 179,0))', transition: 'backgroundImage 1s linear', }; return(

); }

hellooo · Answer

gpt에 물어보니 gradient와 transition을 함께 사용할 때는 주의해야 합니다. 일반적으로 gradient의 색상값이 변경될 때, transition 효과가 적용되지 않는 문제가 발생할 수 있습니다. 이는 gradient가 CSS의 일부가 아니라 이미지 취급을 받기 때문입니다. 따라서, gradient를 표현하는 이미지의 트랜지션을 효과를 적용하고 싶다면, 이미지 요소(예: img)에 transition을 적용해야 합니다.그러나 일부 브라우저에서는 최신 CSS 스펙에 따라 gradient가 애니메이션 가능하게 변경되었지만, 호환성 문제가 있을 수 있습니다.inline스타일로는 불가능한거 같고 css에서 가상요소로 작성 할 수는 있는거 같아요.div-box:hover::after { opacity: 1; } .div-box::after { content: ""; background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(0, 212, 255, 1) 100% ); opacity: 0; width: 100%; height: 100%; position: absolute; display: block; transition: all 0.3s; top: 0; }

hover

리액트 호버 애니메이션은 방법이 없나요?

1개의 답변

Q&A 목록