홈>
내가 말하는 것에 대한 코드 펜 입니다.
기본적으로
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 : Angular에서 입력 클릭 이벤트를 기반으로 페이지 위로 이동
- javascript : 내 웹 개발 code를 처리하는 데 어려움이 있습니다.
- javascript : RGB 값으로 회색 음영 얻기
- javascript : html, css, js로 onclick 이벤트를 어떻게 할 수 있습니까?
- javascript : 캔버스에서 버튼을 정렬하고 스타일을 지정하는 방법은 무엇입니까?
- javascript : 내 웹사이트의 모바일 버전 버거 버튼이 드롭다운되지 않음
- javascript : .click 토글 기능을 어떻게 재설정합니까?
- javascript : EventListener에서 JS 기본값을 깨는 함수 매개 변수
- JavaScript(DOM)를 사용하여 색상 변경
- javascript : 누구든지 배경색으로 캔버스 이미지를 저장하는 방법을 말해 줄 수 있습니까?
변환은시각적효과이며 레이아웃을 변경하지 않기 때문에 변환 대신 마진을 사용하여이 작업을 수행 할 수 있습니다.
와이즈 비즈