[React] 애니메이션-transition

전환 애니메이션

1. 애니메이션 동작 전 스타일을 담을 className 만들기

2. 애니메이션 동작 후 스타일을 담을 className 만들기 

3. transition 속성도 추가

4. 원할 때 2번 탈부착

 

Detail.js

import { useEffect, useState } from "react";
import { Container, Row, Col, Nav } from "react-bootstrap";
import { useParams } from "react-router";
import styled from "styled-components";

function Detail(props){
	let [tab, setTab] = useState(0);
    let [fade, setFade] = useState('');

    useEffect(()=>{
        setTimeout(()=>{setFade('end')},300)
        
    },[]) // 처음 로드 될 때 한번만 실행
  
    let{id} = useParams();
    if(id >= props.shoes.length){
        return <div>없는상품입니다.</div>
    }
    return(
    	// 페이지를 로딩할 때 0.5초 후 서서히 페이지가 나타남
        <div className={"start "+fade}>
            <Container>
                {remove && <div className="alert alert-warning">
                    2초이내 구매시 할인
                </div>}
                <button onClick={()=>{ setCount (count+1)}}>버튼{count}</button>
                <Row>
                    <Col md={6}>
                        <img src={"https://codingapple1.github.io/shop/shoes"+(props.shoes[id].id+1)+".jpg"} width="80%"/>
                        <h4>{props.shoes[id].title}</h4>
                        <p>{props.shoes[id].content}</p>
                        <p>{props.shoes[id].price}원</p>
                        <button className="btn btn-danger">주문하기</button>
                    </Col>                                       
                </Row>
            </Container>
            
            {/* defaultActiveKey : 기본적으로 눌려 있을 키 */}
            <Nav variant="tabs" defaultActiveKey="link0"> 
                <Nav.Item>
                    <Nav.Link onClick={()=>{setTab(0)}} eventKey="link0">버튼0</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link onClick={()=>{setTab(1)}} eventKey="link1">버튼1</Nav.Link>
                </Nav.Item>
                <Nav.Item>
                    <Nav.Link onClick={()=>{setTab(2)}} eventKey="link2">버튼2</Nav.Link>
                </Nav.Item>
            </Nav>
            
            <TabContent tab={tab}/>
        </div>
    )
    
}

function TabContent({tab}){ 

    let [fade, setFade] = useState('');

    useEffect(()=>{
        // state 변경이 다 된 후 마지막에 재렌더링 하기 때문에 두개를 합쳐 하나만 실행함 -> setTimeout 해서 시간차 두기
        setTimeout(() => {setFade('end')}, 100)     
        return()=>{
            setFade('')
        }
    },[tab])

    // 문자중간에 변수 넣기 : {'start '+fade} , 'start `${fade}`'
     return (<div className={'start '+fade}> 
     {[ <div>내용 0</div>, <div>내용 1</div>, <div>내용 2</div> ][tab]}
     </div>
)}

export default Detail;

 

CSS

.start{
  opacity: 0;
}
.end{
  opacity: 1;
  transition: opacity 0.5s; /* opacity가 실행될 때 0.5초에 걸쳐서 변함*/
}