2022.01.27(Tue.) <React에서 keyframes로 애니메이션 만들기>

css도 이렇게 움직일 준비 됐나?!?! 네네! 선장님!!

1. 문제의 발단

사이드바 메뉴에 슬라이드 애니메이션을 넣어서 완성도를 높여보려고 시도하는 도중, keyframes를 이용하면 다양한 방식과 움직임을 표현할 수 있겠다고 생각하였고 그것을 정리하기 위해 포스팅을 시작했다.

2. keyframes?

• transition과 anumation을 사용해서 움직임을 줄 수 있는 것은 알 고 있다.
• 이때, animation의 변화되는 방식을 설정하는 것이 keyframes가 된다.

3. keyframes의 간단한 예시

// page.js

function page()  {
	<div>
    	<div className="text">How are you?</div>
    </div>
}

.text {
    position: relative;
    font-size: 5rem;
    animation: slide 2s ease-in-out;
}

@keyframes slide {
    from {
        left: -650px;
    }
    to {
        left: 0;
    }
}

결과물 입니다

• animation 속성에는 순서대로 keyframes로 만들어준 애니메이션의 이름, 지속 시간, 어떤 방식으로 애니메이션을 보여줄지를 넣는다.

4. 추가로 보는 사이드바에 들어가고 나오는 애니메이션 만들기

// page.js

function page()  {
	<div>
    	<div className="text" onClick={openHandler}>
                How are you?
            </div>
            <span className={isOpen ? "sidebar active" : "sidebar"}>
                <nav>Hi!</nav>
                <nav>Hello</nav>
            </span>
    </div>
}

.text {
    margin-top: 20px;
    position: relative;
    font-size: 5rem;
    animation: slide 2s ease-in-out;
    transition: 220ms ease-in-out;
    cursor: pointer;

    &:hover {
        color: red;
    }
}

@keyframes slide {
    from {
        left: -650px;
    }
    to {
        left: 0;
    }
}

.sidebar {
    display: flex;
    flex-direction: column;
    width: fit-content;
    position: relative;
    background-color: white;
    color: black;
    font-size: 2rem;
    bottom: 5px;
    padding: 1rem;
    left: -100%;
    transition: 1.5s;
}

.sidebar.active {
    left: 0;
    transition: 1.5s;
}

결과물 입니다!

• 초기에 시작을 화면의 밖에 가려진 상태로 한다.
• className에 삼항연산자로 active 속성을 이용해 css를 바꿔준다.