홈>
모바일에서 다음과 같은 반응 형 웹 앱을 만들려고했습니다.
메뉴 표시 줄을 클릭하면 다음으로 변환됩니다 :
스타일은 SCSS로 작성되었으며 다음과 같습니다.
.topbar-menu {
width: 100%;
height: 100%;
display: flex;
align-items: center;
position: relative;
.topbar-navi-menu {
margin-left: 15px;
height: 30px;
width: 40px;
display: block;
cursor: pointer;
position: relative;
i {
position: absolute;
height: 5px;
width: 100%;
background-color: #ffffff;
&.topbar-animate-forward {
&:first-child {
animation: topbar-first-bulk 500ms forwards;
}
&:nth-child(2) {
animation: topbar-middle-bulk 500ms forwards;
}
&:last-child {
animation: topbar-last-bulk 500ms forwards;
}
}
&:first-child {
top: 0;
}
&:nth-child(2) {
top: 50%;
transform: translateY(-50%);
}
&:last-child {
bottom: 0;
}
}
@keyframes topbar-first-bulk {
0% {
top: 0;
transform: translateY(0%) rotate(0deg);
}
25% {
top: 50%;
transform: translateY(-50%) rotate(0deg);
}
50% {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
100% {
top: 50%;
transform: translateY(-50%) rotate(-45deg);
}
}
@keyframes topbar-middle-bulk {
0% {
top: 50%;
transform: translateY(-50%) rotate(0deg);
}
25% {
top: 50%;
transform: translateY(-50%) rotate(0deg);
}
50% {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
100% {
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
}
@keyframes topbar-last-bulk {
0% {
bottom: 0;
transform: translateY(0%) rotate(0deg);
}
25% {
bottom: 50%;
transform: translateY(50%) rotate(0deg);
}
50% {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
100% {
bottom: 50%;
transform: translateY(50%) rotate(-45deg);
}
}
}
}
이유식 을 사용하고 있습니다. reactjs와 같습니다. JSX 구조 :
<div className="topbar-container">
<section className="topbar-menu">
<a
onClick={
_evt => self.send(MobileMenuToggler(self.state.showMobileMenu))
}
className="topbar-navi-menu">
<i className={self.state.mobileMenuAnimate} />
<i className={self.state.mobileMenuAnimate} />
<i className={self.state.mobileMenuAnimate} />
</a>
</section>
</div>
CSS를 사용하여 애니메이션을 메뉴 막대로 되 돌리는 방법은 무엇입니까?
- 답변 # 1
관련 자료
- r - 각 ID에 대해 하나의 레코드를 가질 수 있도록 df를 재구성하는 방법
- css - HTML 단락의 맨 아래 만 채우는 방법은 무엇입니까?
- php - 다음 어레이를 어떻게 구할 수 있습니까?
- r - ggplot2에서 얼굴 라벨을 추가하는 방법
- javascript - 이 배열의 모든 자손을 얻는 방법은 무엇입니까?
- android - 행 항목을 화면에 맞추는 방법
- ios - 신속하게 응답 JSON을 얻는 방법
- big sur - macOS Big Sur 1101에서 시간 알림을 중지하는 방법
- javascript - localstorage의 데이터로 저장소를 초기화하는 방법은 무엇입니까?
- drupal - 프로그래밍 방식으로 등록 양식에 역할을 설정하는 방법
- python - 행 간의 차이를 얻는 방법
- html 및 css에서 링크를 중앙에 정렬하려면 어떻게해야합니까?
- python - 값이 dict 목록에 있는지 확인하는 방법
- mysql - 값의 하위 합계를 어떻게 얻을 수 있습니까?
- java - 특정 플레이어의 채팅을 끄려면 어떻게합니까?
- r - 특정 날짜를 연도의 시작 날짜로 설정하는 방법
- macos bigsur - Zoom 채팅에서 글꼴을 확대하는 방법은 무엇입니까?
- flutter - API에 어떻게 요청할 수 있습니까?
- performance - 주요 지표를 얻는 방법?
- go - 데이터베이스 시간대 설정 방법
관련 질문
- html : 선택 입력을 클릭할 때 배경 이미지가 확대되는 이유
- html : 상자 내부에서 이미지가 왜곡됨
- css : SASS -여러 파일에서 변수 사용
- html : 클래스 이름으로 div 너비를 설정하는 방법
- css : 프론트엔드의 배경에 부서진 시각 효과를 만드는 방법이 있습니까?
- html : CSS가 ReactMde에 적용되지 않음
- javascript : CSS 애니메이션 문제 -버튼 애니메이션
- css : sass에서 &*는 무엇을 의미합니까?
- css : 햄버거 메뉴 클릭 시 사이드 메뉴 변환 애니메이션이 제대로 작동하지 않음
- javascript : 웹사이트에서 임의의 인용문과 이미지를 가져오는 API를 찾으십니까?
상태 전환을 위해 전환을 사용하십시오. 애니메이션의 현재 시간 단계 인 보간 값이 고정되어 있기 때문에 애니메이션이 쉽게 앞뒤로 이동하도록 지시 할 수 없습니다. 갑자기 앞쪽이 아니라 뒤쪽에 있어야한다고 스타일에 말한 경우에도 현재 시간 단계와 동일한 새로운 보간 함수를 적용하기 때문에 생각한 방식으로 애니메이션이 적용되지 않습니다. 보간.
대신, "활성"클래스를 제거 할 때 레이어 전환을 적용하고 원하는 전환 지연을 설정하십시오.
예를 들어, 스타일에서 애니메이션을 통해 25 %가 될 때까지 변환 변경 사항을 적용하려고했습니다. 해당 속성에 전환 지연을 설정하십시오.다단계 애니메이션에 대한 자세한 내용은 다단계 애니메이션 및 전환 사용을 참조하십시오.