리액트 사이드바 애니메이션 질문입니다

Question

리액트로 사이드바 컴포넌트를 직접구현하고있습니다. import React, {useEffect, useState} from 'react';import styled, { keyframes } from 'styled-components';export default function SideBar(props) { const onClickClose = () => { props.setIsSideBarOpen(false); console.log(props.isSideBarOpen); } return ( )}//사이드바 애니메이션 효과const slideIn = keyframes` from { transform: translateX(-100%); } to { transform: translateX(0%); }`;const slideOut = keyframes` from { transform: translateX(0%); } to { transform: translateX(-100%); }`;const Container = styled.div` &.open { animation: ${slideIn} 0.2s ease-in-out; } &.close { animation: ${slideOut} 0.2s ease-in-out; } width: 214px; height: calc(100% - 16px); padding: 8px; background-color: #FFFFFF; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #f2f3f5;`;const TopArea = styled.div` width: 100%; height: 50px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid #f2f3f5; padding-bottom: 5px;`;const Title = styled.div` display: flex; justify-content: center; align-items: center; margin-left: 15px;`;const Bold = styled.span` font-weight: 700; margin-left: 5px;`;const Button = styled.button` width: 34px; height: 34px; border-radius: 50%; border: 1px solid #f2f3f5; cursor: pointer; margin-right: 10px;`;const ButtonArea = styled.div` width: 100%; height: 70px; display: flex; flex-direction: column; align-items: center; margin-top: 15px;`;const StartButtonOuter = styled.div` width: 208px; height: 40px; border-radius: 999px; background: linear-gradient(98.97deg, #54C8ED 23.83%, #DFC361 71.97%); color: #3c3e3f; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 500; cursor: pointer;`;const StartButton = styled.div` width: 204px; height: 36px; border-radius: 999px; background: #ffffff; color: #3c3e3f; display: flex; justify-content: center; align-items: center; font-size: 14px; font-weight: 500; cursor: pointer;`;const HistoryArea = styled.div` width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; margin-top: 10px; border: 1px solid #f2f3f5;`;이렇게 구현해봤는데 사이드바가 열릴때는 애니메이션이 잘 적용되는데 닫힐때는 적용이 안되네요.. 어떤 문제일까요?

dys0**** · Answer

스타일드컴포넌트에 isSideBarOpen 변수값 넣어서 css 설정하는건 어떤가요?

리액트 사이드바 애니메이션 질문입니다

1개의 답변

기술 목록