オプションカードスクリーン

コード#コード#

HTML

Tab機能の実装

const [tab, setTab] = useState(0);

<Nav className="mt-5" variant="tabs" defaultActiveKey="link-0">
        <Nav.Item>
          <Nav.Link eventKey="link-0" onClick={()=>{setTab(0); setSwit(false)}}>Active</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-1" onClick={()=>{setTab(1); setSwit(false)}}>Option 1</Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link eventKey="link-2" onClick={()=>{setTab(2); setSwit(false) }}>Option 2</Nav.Link>
        </Nav.Item>
      </Nav>
      
      <CSSTransition in={ swit } classNames="wow" timeout={500}>
        <TabContent tab = { tab } setSwit = { setSwit }/>
      </CSSTransition>



    function TabContent(props) {

      useEffect(()=>{
        props.setSwit(true);
      })

      if(props.tab === 0) {
        return <div>0번째 내용입니다</div>;
      } else if(props.tab === 1) {
        return <div>1번째 내용입니다</div>
      } else if(props.tab === 2) {
        return <div>2번째 내용입니다</div>
      }
    }

SCSS

.wow-enter {
  opacity: 0;
}

.wow-enter-active {
  opacity: 1;
  transition: all 500ms;
}