홈>
모바일에서 다음과 같은 반응 형 웹 앱을 만들려고했습니다.
메뉴 표시 줄을 클릭하면 다음으로 변환됩니다 :
스타일은 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 - 데이터베이스 시간대 설정 방법
관련 질문
- css : GATSBYJS 스타일의 구성 요소를 수출합니다
- javascript : 양식은 제출시 저장된 구성 요소를 재설정합니다
- css : 경계 반경을 무시한 후 V-expansion-Panel에서 작은 분배기 라인을 어떻게 제거 할 수 있습니까?
- javascript : 잡히지 않는 TypeError : WebPack_IMPorted_Module_1 __. 기본값은 정의되지 않았습니다 (반응, Sass, SCSS)
- javascript : 왜 텍스트를 바탕 화면에 입력 필드에 입력 할 수 없지만 모바일에서 작동합니다.
- css : 부트 스트랩 버튼은 인라인 블록을 표시하지 않습니다
- html : Normalize.css 파일을 내 스타일 시트에서 가져온 후에 웹 페이지에는 수평 스크롤 막대와 오른쪽에 공백이 있습니다.
- javascript : 요소의 절대 + 전화 문제점
- javascript : 반응 JS 카드를 분리하려면 어떻게합니까?
- javascript : 요소에서 퇴색하는 것을 반응시킵니다
상태 전환을 위해 전환을 사용하십시오. 애니메이션의 현재 시간 단계 인 보간 값이 고정되어 있기 때문에 애니메이션이 쉽게 앞뒤로 이동하도록 지시 할 수 없습니다. 갑자기 앞쪽이 아니라 뒤쪽에 있어야한다고 스타일에 말한 경우에도 현재 시간 단계와 동일한 새로운 보간 함수를 적용하기 때문에 생각한 방식으로 애니메이션이 적용되지 않습니다. 보간.
대신, "활성"클래스를 제거 할 때 레이어 전환을 적용하고 원하는 전환 지연을 설정하십시오.
예를 들어, 스타일에서 애니메이션을 통해 25 %가 될 때까지 변환 변경 사항을 적용하려고했습니다. 해당 속성에 전환 지연을 설정하십시오.다단계 애니메이션에 대한 자세한 내용은 다단계 애니메이션 및 전환 사용을 참조하십시오.