[CSS] 점점 확장되어 나타나는 애니메이션 구현하기

저번에 이어서 통통 튀는 로고를 클릭 했을 때, 랜덤하게 보드게임을 추천해주고 싶었다. 이 때 보여지는 보드게임 카드가  점점 확장되어 나타날 수 있도록 구현하였다! recommend라는 useState 변수를 만들어 로고 클릭 시 값이 바뀌고, 그에 따라 CSS className도 변경되는 방식이다.  

 

728x90

 

---

 

점점 확장되어 나타나는 애니메이션 구현하기

1. scale : 0에서 1로 변경
2. transition: all 0.5s

 

전체 코드

boardgame.js

<div 
    className={recommend ? "boardgame-recommend-active" : "boardgame-recommend"} 
    onClick={()=> setRecommend(!recommend)}
>
    {
        recommend ? <BoardgameRandomCard /> : <BounceAnimation />
    }
</div>

 

boardgame.css

.boardgame-recommend {
    width: 30%;
    height: 100px;
    margin: 50px auto;
    scale: 0;
    transition: all 0.5s;
}

.boardgame-recommend-active {
    width: 100%;
    height: 200px;
    scale: 1;
}

 

결과 화면