react 기초 (13) - transition 애니메이션 주기

컴포넌트 전환 애니메이션 주기

1.전환 애니메이션은 애니메이션 동작 전 ClassName 만들기

2. 애니메이션 동작 후ClassName 만들기

3.ClassName 만들기 에 transition 속성 추가

 

 

App.css파일

4. 원할때 2번 className 부착

div 태그로 묶어서 className 을  적용해 주면됨

 

버튼을 누를때마다 class명 end를 부착 해주세요 ~ 하고 코드를 짜면 세군대를 수정해야함

 

그래서 탭이라는 state가 변할때마다 end라는 클래스명을 부착 해주는 코들 짜야함 

탭이라는게 변경이 될때마다 특정코드를 실행하고 싶다면?useEffect 사용 하면 되겠쥬

   ①state를 하나 만들어준다 fade라는state를 end로 바꿔주라는 코드를 입력 한다 

    ②fade라는 변수를 문자중간에 집어넣고 싶을때 밑에 코드처럼 입력해주면 됨

   ③이렇게 하면 탭이 변할때마다 fade라는 state를 end로 바꿔주고

🤷‍♀️근데 이렇게 해도 애니메이션이 안되는 걸 볼수있다 왜?🤷‍♀️

end를 이렇게 없앴다가 

이렇게 붙혀야 애니메이션이됨 ,,,

 

   ④탭 state가변할때 end가 뗐다가 부착 되야함

   방법은 cleanfunction 을 사용해서 useEfeect를 쓰면

   end가 실행 되기 전에  end를 잠깐 뗐다가 end를 부착하게 해주면됨...

🤷‍♀️근데 또 안됨 ,,,setTimeout을 써줘야 한다고 하네요🤷‍♀️

⑤0.1초후에 안에있는 코드를 실행 시켜주겠다라고 작성 ㄱㄱ

 

 

어려워어어어어어어엉

 

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

- Detail 컴포넌트 로드시엔 'end'를 부착해주세요

- Detail 컴포넌트 삭제시엔(다음화면으로 나가거나) 'end' 떼어주세요 라고 짜면 되겠죠 ?!

 

1.start라는 className을 만들고 부착

2.end 라는 className을 만듬

3.transition을 추가하고. end를 붙였다 뗄때 애니메이션 동작

4.원할때 end를 뗴었다 붙이면됨