[CSS] gradient transition 적용하기 (React)

 

 

background-image 속성을 통해 그라디언트를 표현하고

transition 값을 주면 예쁘게 전환될 줄 알았지만... 되지 않았다.

 

Transitioning Gradients

검색해보니 ::before와 opacity 속성을 이용하여 구현한 예제가 있었다.

::before에 전환 될 그라디언트를 작성하고 opactiy에 transition을 걸어 전환되게 한 트릭이다.

 

 

 

 

 

내가 구현하려는 목표는

기존의 그라디언트가 있고 버튼을 클릭했을 때 다른 그라디언트로 전환되어야 한다.

 

 

react 그리고 styled-components을 이용하였다.

const Gradient = styled.div`
	background-image: ~기존 그라디언트~;
	z-index: 1;
    
	&::before {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -1;
		background-image: ~전환 될 그라디언트~;
		transition: opacity 0.5s linear;
		opacity: ${({ isOn }) => (isOn ? 1 : 0)};
	}
`

const [isOn, setIsOn] = useState(false);

const handleClick = () => setIsOn(!isOn);

return (
	<Gradient isOn={isOn}>
		<button onClick={handleClick} />
	<Gradient/>
)