[React] Sidebar 부드럽게 보이기 & 부드럽게 내려오기

쿼카쿼카·2022년 9월 4일
0

React / Next

목록 보기
31/34
import React, { useState } from 'react'
import styled, {css} from 'styled-components';

function Sidebar() {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Container>
        <button onClick={() => setIsOpen(true)}>열기</button>
      </Container>
      <SidebarBox isOpen={isOpen}>
        <button onClick={() => setIsOpen(false)}>X</button>
        <p>이름: 내이름</p>
      </SidebarBox>
    </>
  )
}

const Container = styled.div`
  margin: 0;
  overflow: hidden; // translate(-100%)로 올라간 스크롤 없애줌
  background: gray;
`;

const SidebarBox = styled.div`
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%); // 사이드바 위로 올려둠
  width: 12.5rem;
  padding: 0.875rem;
  border-radius: 0.25rem;
  background: #fff;
  opacity: 0; // 투명도 조절하여 부드럽게 보이게하기
  transition: transform 500ms linear, opacity 500ms linear;
  pointer-events: none; // 사이드바 비활성화 일 때 클릭 안 됨

  & button {
    cursor: pointer;
  }

  ${props => props.isOpen && css`
    transform: translateY(0);
    opacity: 1;
    pointer-events: visible;
  `}
`;

export default Sidebar
  • 예전부터 하고 싶었던 부드럽게 흘러나오는 사이드바...드디어 알아냈다...(샤라웃 투 n0hack)

포인터 이벤트

  • opacity로 불투명도 줬을 때 안 보이지만 박스 내부 클릭은 작동해서 포기했었다.
  • 이번엔 opacity와 pointer-events: none 으로 설정하여 아무리 마우스를 굴려봤자 안 된다구

translate를 이용한 엘리베이터

  • top left 등을 이용해서만 움직임을 표현하려고 했는데 translate가 괜히 나온 게 아니다. 역시 해결사
  • 나는 위에서 나오는 박스를 구현했지만 사이드바를 원하면 translateX(-100%) 해주면 될 듯하다. 물론 난 안 해봤다.
  • overflow: hidden으로 낄끼빠빠 스크롤바(라임 지렸다)를 없애준다.
profile
쿼카에요

0개의 댓글