이것을 제대로 이해해보자. 한 가지 물어보겠습니다. 아래 목록의 높이는 몇 픽셀인가요?
HTML, XML
트릭 질문입니다. (어쨌든 CSS에서는) 알 수 없습니다. 글꼴 모음, 글꼴 크기, 레이아웃 선택, 사용자 기본 설정 및 재정의, 화면 크기 등에 따라 달라집니다. CSS는 모르기 때문에 애니메이션을 적용할 수 없습니다. 페이지에 바로 있기 때문에 어리석은 느낌이 들지만 실제로는 그렇습니다.
수년 동안 CSS 개발자의 가장 일반적인 소망 중 하나는 숨겨진 요소(또는 페이지에 새로 추가된 요소)를 자연스러운 고유 크기에 맞게 높이가 0으로 애니메이션화하는 방법이었습니다. "자동으로 애니메이션화" 또는 "자동으로 전환"이 자주 언급되는 방식입니다. 그 욕구는 매우 간단합니다.
.element {
height: 0; /* or block-size */
transition: height 0.2s ease-in-out;
&.open {
/* nope, sorry, transition will not happen */
height: auto;
}
}
CSS
이런 종류의 것은 본질적으로 가장 일반적인 애니메이션인 열기 또는 닫기 애니메이션 입니다. 높이가 알려진 상자에만 높이 애니메이션을 적용할 수 있는 방법을 보려면 아래 상자를 선택하세요.
Just Using JavaScript™️와 같은 해결 방법이 있습니다(예: 화면 크기를 측정한 후 그에 맞게 애니메이션화). 또는 대신 애니메이션을 적용하면 max-height작동하지만 애니메이션의 일부가 너무 높거나 낮은 숫자로 애니메이션을 적용할 가능성이 높기 때문에 타이밍이 엉망이 됩니다.
공평하게 말하자면, View Transitions를 얻었을 때 이런 느낌을 받았습니다. ( 이 예를 참조하세요 ). 그러나 동일 페이지 보기 전환에는 JavaScript가 필요하며 기본 CSS를 사용하는 것만큼 인체공학적이지 않습니다.
CSS는 곧 이 보스전에서 승리할 준비가 되어 있으며, 이는 정말 놀라운 일입니다. 다음 두 가지 작업을 수행할 수 있어야 합니다.
높이가 0인 것(또는 DOM에 방금 추가된 것)에서 고유한( auto) 크기로 애니메이션을 적용합니다. 대부분 height/ block-size이지만 다른 방향도 도움이 됩니다.
고유( auto) 크기에서 다시 0으로 애니메이션을 적용합니다.
내가 글을 쓰는 동안 Chrome Canary에서 작동하는 (매우 실험적인) 버전이 있습니다. 이 모든 것은 하나의 작은 줄로 해결됩니다.
.element {
height: 0; /* or block-size */
transition: height 0.2s ease-in-out;
&.open {
/* works now! ???? */
height: calc-size(auto);
}
}
자바스크립트
실험적인 웹 플랫폼 기능 플래그가 포함된 Chrome Canary의 사본이 있다면 지금 바로 이 작업을 볼 수 있습니다!
공정한 경고: 아마도 깨질 것입니다.
나는 당신에게 경고했다. 이것은 실험적인 내용입니다. 나는 calc-size() 아마도 이 모든 일이 이렇게 끝나지는 않을 것이라고 들었습니다. 이것이 작동하려면 설정해야 하는(그런 다음 계단식으로) "선택" 속성이 있을 수 있습니다 . 모든 것이 초기 단계이고 불분명합니다. 이것이 최선의 솔루션이 이루어지는 방식이기 때문에 괜찮습니다.
실제 사례: 드롭다운
드롭다운 메뉴는 다양한 요소 수를 포함할 수 있으므로 높이를 알 수 없지만 열려 있는 애니메이션을 원할 수 있으므로 좋은 예입니다. 아래 데모에서 드롭다운 메뉴는 바로 제가 만든 것입니다. 하위 메뉴는 절대 위치에 있고 높이가 0이기 때문에 숨겨져 있습니다. 일반적으로 하위 메뉴를 원하지 않는 display: none경우 메뉴 탭 이동이 어렵거나 불가능해집니다.
CSS에는 각각의 흥미로운 부분을 설명하기 위해 위에 주석이 많이 달려 있습니다. 다음은 Chrome Canary가 작동하는 모습을 보여주는 동영상입니다.
이 메뉴는 접근성상의 이유로 의도적으로 하위 메뉴를 숨기는 데 사용되지 않습니다 . 상태 display: none에서 요소를 전환해야 하는 경우 display: none(또는 처음으로 DOM에 추가하는 경우) 더 복잡해집니다. 하지만 놀랍게도 현대 CSS도 그 일을 해낼 수 있습니다. 다음에 살펴보겠지만요.
다음에서 전환 중display: none;
코드를 보여드리겠습니다.
.element {
/* hard mode!! */
display: none;
transition: height 0.2s ease-in-out;
transition-behavior: allow-discrete;
height: 0;
@starting-style {
height: 0;
}
&.open {
height: calc-size(auto);
}
}
CSS
transition-behavior: allow-discrete;(내가 이해하지 못하는 놀라운 이름)을 사용하면 속성이 전환 중에 업데이트되는 위치를 바꿀 수 있습니다 display. 즉시 변경하는(따라서 애니메이션을 방지하는) 일반적인 동작 대신 마지막에 변경됩니다 ( 숨겨진 상태에서 애니메이션을 적용하는 경우 그 반대).
@starting-style그런 다음 "닫힌" 스타일을 복제하는 여기에도 필요합니다 . 그것도 끔찍하게 이상해 보이지만 이것이 작동하는 방식입니다( 이에 대한 실제 브라우저 지원이 있습니다 ). 제가 생각하는 데 도움이 되는 방법은 가 display: none사용 중일 때 다른 스타일 중 어느 것도 요소에 실제로 적용되지 않고 단지 존재하지 않는다는 것입니다. open여기에 클래스를 적용 하면 해당 스타일이 모두 즉시 적용됩니다. 이전 상태가 없었습니다. 열린 상태가 유일한 상태입니다. @starting-style이전 상태로 강제하는 방법도 마찬가지다 .
Adam Argyle은@starting-style 페이지에 나타나는 모든 요소가 약간 확대되고 페이드 인되도록 일부 일반 스타일을 사용하여 전역적으로 적용되는 스타일을 실험하고 있었습니다.
아이디어는 이렇게 시작되었습니다.
* {
transition: opacity .5s ease-in;
@starting-style { opacity: 0 }
}
CSS
그리고 조금 더 뉘앙스와 배려를 더해 다음과 같이 만들었습니다.
@layer {
* {
@media (prefers-reduced-motion: no-preference) {
transition:
opacity .5s ease-in,
scale .5s ease-in,
display .5s ease-in;
transition-behavior: allow-discrete;
}
@starting-style {
opacity: 0;
scale: 1.1;
}
&[hidden],
dialog:not(:modal),
&[popover]:not(:popover-open) {
opacity: 0;
scale: .9;
display: none !important;
transition-duration: .4s;
transition-timing-function: ease-out;
}
}
}
CSS
