그리드 레이아웃 확장에 애니메이션을 적용하는 방법은 무엇입니까?
P粉937382230
2023-08-31 21:09:37
<p>그리드 레이아웃의 확장에 애니메이션을 적용하는 방법을 알고 싶습니다. 코드에서 볼 수 있듯이 4개의 div가 있습니다. 그 중 두 개가 표시되고 나머지 두 개는 확인란을 선택한 경우에만 표시됩니다. </p>
<p>확인란을 선택하면 div3 및 div4가 포함된 다른 행이 추가됩니다. 확장 프로그램에 애니메이션을 적용하려면 어떻게 해야 하나요? 그리드의 크기를 작게 유지하는 것이 가장 좋습니다. 애니메이션이 (존재하지 않는) 여백에 영향을 미치는 것을 원하지 않습니다. 또한 JavaScript 없이 이 작업을 수행하고 싶습니다. 가능합니까? </p>
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<머리>
<meta charset="utf-8">
<메타 이름="뷰포트" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>웹사이트</title>
</머리>
<본문>
<입력 클래스="토글" 유형="체크박스">
<div 클래스="그리드">
<div class="div1">안녕하세요</div>
<div class="div2">Hello2</div>
<div class="div3">Hello3</div>
<div class="div4">Hello4</div>
</div>
</body>
</html></pre>
<pre class="brush:php;toolbar:false;">.toggle {
너비: 100%;
}
.그리드 {
디스플레이: 그리드;
너비: 20%;
테두리: 단색 검정색 2px;
}
.div1 {
그리드 열: 1;
그리드 행: 1;
}
.div2 {
그리드 열: 2;
그리드 행: 1;
}
.div3 {
디스플레이: 없음;
}
.div4 {
디스플레이: 없음;
}
.toggle:체크됨 ~ .grid >
디스플레이: 블록;
그리드 열: 1;
그리드 행: 2;
}
.toggle:체크됨 ~ .grid >
디스플레이: 블록;
그리드 열: 2;
그리드 행: 2;
}</pre>
<p>추가된 행을 위한 공간을 확보하기 위해 div 컨테이너를 아래로 밀어넣고 싶습니다. 당신의 도움을 주셔서 감사합니다. </p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
해결책은 매우 간단합니다. 내 그리드를 다른 그리드 안에 넣었습니다. 그런 다음 기본 그리드가 있는 div의 행 크기를 조정하는 방법으로 fr을 사용했습니다. 이로 인해 그리드 행을 0fr에서 1fr로 변환할 수 있습니다. 그게 다야.
또한 그리드에 다양한 크기의 다양한 행이 있는 경우에도 마찬가지입니다. 예를 들어, 0.05fr과 1fr에 하나씩 있으면 애니메이션이 "지연"됩니다. 당신이 할 수 있는 일은 래퍼 그리드를 다른 래퍼 그리드 안에 넣는 것입니다. 그런 다음 실제 행을 사용하여 해당 그리드에 애니메이션을 적용하는 대신 동일한 방법을 사용하여 첫 번째 그리드의 하위 항목이나 실제 그리드의 상위 항목에 애니메이션을 적용합니다.
이것은 이상한 해결 방법이지만 너무 많은 작업을 다시 수행하지 않고도 문제를 해결할 수 있는 방법입니다.