CSS의 전환 높이

1. transition 속성을 max-height 및 overflow 속성과 함께 CSS에서 전환 높이로 사용
2. CSS에서 transition과 함께 transform 속성을 사용하여 전환 높이로

이 기사에서는 CSS에서 요소 높이에 전환을 적용하는 몇 가지 방법을 소개합니다.

transition 속성을 max-height 및 overflow 속성과 함께 CSS에서 전환 높이로 사용

전환은 지정된 기간 동안 속성 값을 원활하게 변경하기 위해 널리 사용되는 속성입니다. 전환은 애니메이션으로 명명될 수도 있습니다.

전환에는 transition-property, transition-duration, transition-timing-function 및 transition-delay와 같은 특정 속성이 있습니다. transition-property는 전환 효과를 사용하여 변경되는 CSS 속성을 정의합니다.

transition-duration은 전환을 완료하는 데 걸리는 시간, 즉 초 단위 시간을 정의합니다. transition-timing-function은 전환이 발생하는 방법, 즉 전환에 어떤 효과가 부여되는지 정의합니다.

transition-timing-function은 ease, ease-in, ease-out, linear, ease-in-out 등을 가질 수 있습니다. transition-delay 속성은 시간을 지정합니다. 전환을 시작하는 데 필요합니다.

이러한 속성을 결합하고 다음과 같이 전환 속기 속성을 사용할 수 있습니다.

transition: height 2s linear 1s;

여기에서 height는 transition-property, 2s는 transition-duration, linear는 transition-timing-function, 1s는 transition-delay를 나타냅니다.

max-height 속성과 함께 transition을 사용하여 요소의 높이를 0에서 auto로 설정할 수 있습니다. 텍스트 위로 마우스를 가져가 특정 HTML 요소의 높이를 변경할 수 있습니다.

max-height가 0으로 설정된 경우 overflow:hidden 속성을 사용하여 넘쳐나는 항목을 숨길 수 있습니다.

예를 들어 div를 만들고 ID를 main으로 지정합니다. 그 div 안에 단락 태그 p를 만들고 Hover Me를 작성합니다.

다음으로 ul 태그로 정렬되지 않은 목록을 만들고 ID를 items로 지정합니다. li 태그를 사용하여 ul 안에 몇 가지 목록 항목을 만듭니다.

CSS에서 items id를 선택하고 max-height를 0으로 설정합니다. ul 안의 항목이 표시되지 않도록 합니다.

다음으로 background 속성을 gray로 설정합니다. overflow 속성을 hidden으로 설정하십시오.

max-height가 0일 때 넘쳐나는 ul 항목을 숨깁니다. 그런 다음 transition 속성을 max-height 0.15s easy-out으로 설정합니다.

마우스 커서를 가져가는 동안 목록 항목에 ease-out 효과가 나타납니다.

:hover 선택기를 사용하여 main id를 선택한 다음 items id를 선택합니다. 그런 다음 max-height 값을 500px로 설정합니다.

결과적으로 화면 크기가 500px 미만일 때 ul 항목에 따라 높이가 자동으로 조정됩니다. 그런 다음 transition 속성을 transition: max-height 0.25s easy-in;으로 설정합니다.

이것은 0.25초 이내에 ease-in 효과와 함께 ul의 높이를 자동으로 설정합니다.

아래 예는 효과가 있는 텍스트에 마우스를 가져가면 정렬되지 않은 목록이 표시되는 것을 보여줍니다. 그리고 정렬되지 않은 목록은 텍스트 밖으로 마우스를 가져가는 동안 페이드 아웃됩니다.

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 max-height: 0;
 transition: max-height 0.15s ease-out;
 overflow: hidden;
 background: gray;
}
#main:hover #items {
 max-height: 500px;
 transition: max-height 0.25s ease-in;
}

CSS에서 transition과 함께 transform 속성을 사용하여 전환 높이로

transform 속성은 요소의 2D 또는 3D 변환에 사용됩니다. 이 속성은 rotate, scale, skew, move, translate 등과 같은 값을 가질 수 있습니다.

이 튜토리얼에서는 scale을 사용하여 요소의 높이를 변경합니다. 또한 transition 속성을 사용하여 높이가 변경되는 동안 애니메이션을 생성합니다.

scale 속성은 요소의 크기를 조정하는 데 사용됩니다. scaleX를 사용하여 X축의 scale을 사용하고 scaleY를 사용하여 Y축의 스케일을 사용할 수 있습니다.

여기에서 scaleY를 사용하여 수직으로(Y축을 따라) 수행되어야 하는 요소의 높이 크기를 조정합니다. scaleY(1) 값은 요소 높이가 100%임을 나타내고 scaleY(0) 값은 요소 높이가 0%임을 나타냅니다.

transform-origin이라는 속성이 있습니다. 그 값은 변환이 시작되어야 하는 위치를 알려줍니다.

높이를 0에서 auto로 증가시켜 위에서 아래로 높이를 확장하려면 transform-origin 값을 top으로 설정할 수 있습니다. 요소를 가리키면 transform 값을 scaleY(1)로 설정하여 높이를 자동으로 설정할 수 있습니다.

데모의 첫 번째 방법에서 사용한 것과 동일한 HTML 템플릿을 사용합니다.

예를 들어 #main #items와 같은 items id를 선택하고 스타일을 적용합니다. background-color를 gray로 설정합니다.

다음으로 transform 속성을 scaleY(0)으로 설정합니다. 이것은 요소의 높이를 0으로 설정합니다.

그런 다음 위에서 아래로 변환을 시작하려면 transform-origin 속성을 top으로 설정합니다. 그런 다음 transition 속성에 transform 0.3s easy 스타일을 적용합니다.

여기서 transform은 호버링하는 동안 애니메이션이 발생하기를 원하는 속성을 나타냅니다. 0.3은 애니메이션을 완료하는 데 걸리는 시간을 나타냅니다.

ease는 transition-timing-function을 나타내며, 이는 애니메이션이 발생해야 함을 의미합니다. 마지막으로 : hover 선택기를 사용하여 transform 속성을 scaleY(1)로 설정합니다.

div를 가리키면 변환 값이 scaleY(0)에서 scaleY(1)로 변경됨에 따라 ul의 높이가 증가합니다.

예제 코드:

<div id="main">
 <p>Hover Me</p>
 <ul id="items">
 <li>item1</li>
 <li>item2</li>
 <li>item3</li>
 <li>item4</li>
 </ul>
 </div>

#main #items {
 background-color: gray;
 transform: scaleY(0);
 transform-origin: top;
 transition: transform 0.3s ease;
}
#main:hover #items {
 transform: scaleY(1);
}