홈>
내가 말하는 것에 대한 코드 펜 입니다.
기본적으로
div
를 전환하고 싶습니다
부드럽게 위아래로 이동하지만 다른
div
가
공간을 차지하고 동시에 개별적으로 전환하지 않고도 공간을 전환합니다. 나는이
div
이후 그들이 공간을 차지할 것이라고 생각
높이가 없습니다. 그러나 나는 틀렸다!
빈 공간을 검사하면 치수가 없으며 빈 공기가 공간을 차지하는 것과 같습니다. 어떤 이유로 다른
div
의 움직임이 없습니다.
const div1 = document.querySelector('.div1')
function myFunc(e) {
div1.classList.toggle('animate')
}
.div1 {
background: red;
transform: translateY(-200%);
transition: transform 1s ease;
}
.div2 {
background: green;
}
.div3 {
background: blue;
}
.animate {
transform: translateY(100%);
}
<button onClick="myFunc()">Toggle</button>
<div class="div1">
<div>
content
</div>
<div>
content
</div>
<div>
content
</div>
<div>
content
</div>
</div>
<div class="div2">
<div>
content
</div>
<div>
content
</div>
<div>
content
</div>
<div>
content
</div>
</div>
<div class="div3">
<div>
content
</div>
<div>
content
</div>
<div>
content
</div>
<div>
content
</div>
</div>
-
답변 # 1
-
답변 # 2
답변을 얻는 데 도움이 될 것 같습니다
<button onClick="myFunc()">Toggle</button> <div class="div1"> <div> content </div> <div> content </div> <div> content </div> <div> content </div> </div> <div class="div2"> <div> content </div> <div> content </div> <div> content </div> <div> content </div> </div> <div class="div3"> <div> content </div> <div> content </div> <div> content </div> <div> content </div> </div>
const div1 = document.querySelector('.main-div') function myFunc(e) { div1.classList.toggle('animate') }
.main-div { transform: translateY(-350%); transition: transform 1s ease; } .div1 { background: red; } .div2 { background: green; } .div3 { background: blue; } .animate { transform: translateY(0%); }
<button onClick="myFunc()">Toggle</button> <div class="main-div"> <div class="div1"> <div> content </div> <div> content </div> <div> content </div> <div> content </div> </div> <div class="div2"> <div> content </div> <div> content </div> <div> content </div> <div> content </div> </div> <div class="div3"> <div> content </div> <div> content </div> <div> content </div> <div> content </div> </div> </div>
관련 자료
- html - 전체 수직 공간을 차지하지 않는 Flexbox div
- 왜 xamarin 양식에서 listview가 스크롤보기에 더 많은 공간을 차지합니까?
- c# - wpf - 데이터 바인딩을 기반으로 ui 공간을 차지하지 않도록 itemcontrol-> uniformgrid에서 항목 숨기기
- c# - TextBlock이 사용 가능한 모든 공간을 차지하지 못하게하는 방법
- android - 너무 많은 공간을 차지하는 TableRow
- apache kafka - 메시지가 0 개인데도 스파크 스트리밍의 변환에 시간이 더 걸림
- javascript - 공간을 차지하지만 텍스트를 표시하지 않을 때 html 내부 텍스트를 표시하는 방법은 무엇입니까?
- xaml - combobox 항목이 가로 공간을 차지하지 않습니다 - wpf
관련 질문
- javascript - Chartjs 차트가 표시되지 않음
- javascript - 톱니 바퀴 아이콘을 클릭 할 때이 설정 상자를 숨기려면 어떻게해야합니까?
- javascript - 상수 변수 할당 오류
- javascript - css 위치 - 고정;배경 제거
- javascript - JS로 만들 때 선택 항목이 옵션과 함께 나타나지 않는 이유는 무엇입니까?
- javascript - 가져온 후 웹 페이지에 데이터로드
- javascript - Owl carousel 탐색 버튼 (다음 및 이전 주변)에 "테두리"를 추가하려면 어떻게해야합니까?
- 화살표가있는 슬라이더 탐색 (HTML, CSS, JAVASCRIPT)
- javascript - 생성 된 요소 (입력)가 설정시 이벤트를 트리거하지 않는 이유는 무엇입니까?
- html - javascript 날짜 형식 - 형식 the day ex (월)
변환은시각적효과이며 레이아웃을 변경하지 않기 때문에 변환 대신 마진을 사용하여이 작업을 수행 할 수 있습니다.
와이즈 비즈