(transition)컴포넌트 전환 애니메이션 만들기

스스륵 나오는 애니메이션을 만들고 싶다면?

1. 애니메이션 동작전 스타일을 담을 className을 만들기
2. 애니메이션 동작후 스타일을 담을 className을 만들기
3. transition 속성도 추가
4. 처음에는 떼엇다가 붙이기

 

이 순서에 따라서 저번 게시물에서 만들었던 탭의 내용이 서서히 등장하는 fade in 애니메이션을 만들어보것음

 

 

먼저, 애니메이션 동작전후 스타일을 담을 className을 만들고, transition 속성도 추가해볼게요 (css파일)

.start{
    opacity:0; /* 안보임 */
}
.end{
    opacity:1; /* 보임 */
    transition: opacity 0.5s; /* 천천히 보임 */
}

 

다음으로 '버튼을 누를때마다 end를 부착해주세요~!'

useEffect를 써서 state가 바뀔때마다 코드가 실행되는 것을 한번에 만들 수 있습니다

 

function Detail(){
let [tab, setTab] = useState(0) 
let [end, setEnd] = useState('')

useEffect(()=>{
    setTimeout(() => {
      setEnd('end') //붙였다 == 보임
    }, 100);
  return ()=>{
  //useEffect {}안에보다 먼저 실행하고 싶은 코드넣기
  setEnd('') // 떼었다가
  }
  },[tab])
  
function TabContent(props){
// return 을 생략하면 undefined가 뜹니다.
// 컴포넌트가 렌더링되는 동안 무언가를 반환해주어야 합니다
if(props.tab === 0){
 return <div className={"start" +props.end}>내용0</div>
}
if(props.tab === 1){
 return <div className={"start" +props.end}>내용1</div>
}
if(props.tab === 2){
 return <div className={"start" +props.end}>내용2</div>
}
}
}

end를 처음부터 붙이면 안되고 실은 떼었다가 붙여야 애니메이션이 보입니다.

end를 떼었다가 붙여보셈!

여기서 clean up function 역할을 하는 useEffect 안의 return function은 useEffect가 실행되기 전에 먼저 실행되면서

기존의 코드를 클린하게 초기화해줌! 빈문자열로('')

그럼, 버튼을 누를때마다 조금 뒤에 내용0,내용1,내용2 등이 서서히 나타납니다

 

 

 

 

 

응용문제: Detail 컴포넌트 로드시 투명도가 0에서 1로 서서히 증가하는 애니메이션을 주려면?

function Detail(props){
let [end2, setEnd2] = useState('') 

useEffect(()=>{
    setTimeout(()=>{
      setEnd2('end') 
    },1000)
    return ()=>{
     setEnd2('')
    }  
  },[])
  
  return(
        // Detail 컴포넌트 로드시 투명도가 0에서 1로 서서히 증가하는 애니메이션을 주려면?
        <div className={'container start' + end2}>
        //생략
        <div>
        )
        }

1. 애니메이션 동작전 className인 start를 만들고 붙임

2. 애니메이션 동작후 className인 end를 만듦

3. end에 transtion도 추가

4. 내가 원할때(state가 변경될때마다) end을 떼었다가 붙임 => useEffect와 return function 사용!

 

 

그럼 결과는 어떻게 나오냐면요!

화면을 키거나 새로고침할때마다 1초 뒤에 서서히 화면이 뜨는 효과가 생깁니다