react bootstrap에서 제공하는 component 에 애니메이션 적용 문의

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글
2021년 2월 24일 00:21 #6821

방기훈
참가자

bootstrap 에서 제공하는 component 를 사용해서 디자인을 하고 있습니다.

component가 등장할때 애니메이션을 추가하기 위해서, 애니메이션 등록 강좌를 다시 보면서 해보고 있는데요

등장할 component state 변경 함수를 전달하고, component 내 useEffect 함수를 통해서 애니메이션 실행을 위한 state를 변경하는 방식인데

bootstrap에서 제공하는 component에 이런 일련의 과정(props를 통해 state변경함수 전달 및 useEffect 적용) 을 적용하려면 어떤식으로 해야하나요?

2021년 2월 24일 10:50 #6827

codingapple
키 마스터

애니메이션 주려면 간단하게 <CSSTransition> 으로 부트스트랩 태그를 감싸면 될 듯 합니다

2021년 2월 24일 14:03 #6831

방기훈
참가자

말씀하신대로 CSSTansition을 사용하려고 하는거긴 한데요

csstransition 의 실행조건 state를, bootstrap component가 등장할때 변경하려고 하다보니, 그 component 내 useEffect 를 달아야하고, 거기에서 state 변경 함수를 호출해야하지 싶어서요

2021년 2월 24일 17:28 #6833

codingapple
키 마스터

부트스트랩을 싸매는 컴포넌트를 만들어 쓰면 가능합니다

<CSSTransition>

<TabContent 누른탭={누른탭}/>

</CSSTransition>

function TabContent(props){

  if (props.누른탭 === 0) {
   return <부트스트랩 컴포넌트>
  } else {
    return <부트스트랩 컴포넌트>
  }
}
글쓴이

글

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

답변은 로그인 후 가능합니다.

로그인

react bootstrap에서 제공하는 component 에 애니메이션 적용 문의

https://codingapple.com/wp-content/uploads/2019/06/logo2-3.png