그리드 레이아웃 확장에 애니메이션을 적용하는 방법은 무엇입니까?
<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>
