CSS를 사용하여 높이를 0에서 자동으로 전환하는 방법은 무엇인가요?

저는 CSS 전환을 사용하여

슬라이드를 내려오게 만들고 있습니다.
은 height: 0;에서 시작됩니다. 호버하면 높이가 height:auto;로 설정됩니다. 그러나 이로 인해 전환되지 않고 그냥 나타나는 문제가 있습니다.

나는 height: 40px;에서 시작해서 height: auto;까지 하면 height: 0;로 올라가고, 그런 다음에 갑자기 정확한 높이로 뛰어오를 것이다.

자바스크립트를 사용하지 않고 이것을 어떻게 더 할 수 있을까요?

#child0 {

height: 0;

overflow: hidden;

background-color: #dedede;

-moz-transition: height 1s ease;

-webkit-transition: height 1s ease;

-o-transition: height 1s ease;

transition: height 1s ease;

}

#parent0:hover #child0 {

height: auto;

}

#child40 {

height: 40px;

overflow: hidden;

background-color: #dedede;

-moz-transition: height 1s ease;

-webkit-transition: height 1s ease;

-o-transition: height 1s ease;

transition: height 1s ease;

}

#parent40:hover #child40 {

height: auto;

}

h1 {

font-weight: bold;

}

The only difference between the two snippets of CSS is one has height: 0, the other height: 40.

---

Hover me (height: 0)

Some content


Some content


Some content


Some content


Some content


Some content




---

Hover me (height: 40)

Some content


Some content


Some content


Some content


Some content


Some content




답변 1

전환에서는 ht . And s 대신 max-height를 사용하고 max-height에 대한 값을 상자가 얻는 것보다 큰 값으로 설정하십시오.

다른 answer에서 크리스 조던이 제공한 JSFiddle demo를 참조하세요.

#menu #list {

max-height: 0;

transition: max-height 0.15s ease-out;

overflow: hidden;

background: #d5d5d5;

}

#menu:hover #list {

max-height: 500px;

transition: max-height 0.25s ease-in;

}

hover me

• item
• item
• item
• item
• item

답변 2

높이(height) 속성은 웹 디자인에서 중요한 역할을 합니다. 웹페이지 디자인에서 콘텐츠 사이즈의 변화나 측정값이 정확한 경우가 드물기 때문에, 각 엘리먼트의 높이 속성을 정확하게 지정해주어야 합니다. 이것은 레이아웃과 디자인의 한계를 극복하는데도 중요한 역할을 합니다.

CSS에서 높이 속성의 값을 0으로 지정하는 경우 하위 엘리먼트가 비율적으로 해당 영역만큼 더이상 사용하지 못하도록 제한됩니다. 그러나 이것은 동시에 전체 콘텐츠를 가려서 전체 내용을 볼 수 없게 만들어버릴 수 있습니다. 따라서 사용자에게 보여줘야 하는 콘텐츠에 따라 높이값을 조절하는 작업이 필요합니다.

그래서, 높이 값을 0으로 지정한 후 특정 이벤트에 반응해 높이 값을 자동으로 조절하도록 지정하는 것이 바람직합니다. 이를 위해서는 높이 속성 값을 transition 속성에 추가하여, 일반적인 속도와 동적인 효과로 제어할 수 있습니다.

예를 들어, 아래 코드는 hover 이벤트가 발생할 때 height 값을 자동으로 조절하는 예시입니다.

```

box {

height: 0;

transition: height 0.5s ease;

}

box:hover {

height: auto;

}

```

이렇게 높이 속성 값을 0으로 지정한 후 hover 같은 이벤트를 통해 높이 값을 자동으로 조절하는 것으로, 사용자가 적절하게 콘텐츠를 볼 수 있도록 돕는 것이 가능합니다.

결론적으로, 기본적인 CSS 속성들을 적절하게 활용하면 높이값을 자동으로 조절하는 등의 디자인 요소를 손쉽게 제어할 수 있습니다. 따라서 웹 디자이너들은 올바른 CSS 속성 사용법을 익히고, 사용자가 콘텐츠를 쉽게 볼 수 있도록 디자인을 하도록 노력해야 합니다.