CSS를 사용하여 높이:0;높이:자동;을 어떻게 전환할 수 있나요?

Question

CSS 전환을 사용하여

높이: 0;에서 시작합니다. 마우스를 올리면 높이가 height:auto;로 설정됩니다. 그러나 이로 인해 전환 없이




height: 40px;에서 height: auto;로 이동하면 height: 0;< /code> 그런 다음 갑자기 올바른 높이로 점프합니다.

JavaScript를 사용하지 않고 어떻게 이 작업을 수행할 수 있나요?




#child0 {
  높이: 0;
  오버플로: 숨김;
  배경색: #dedede;
  -moz-transition: 높이 1초 용이성;
  -webkit-transition: 높이 1초 용이성;
  -o-전환: 높이 1초 용이성;
  전환: 높이 1초 용이성;
}
#parent0:호버 #child0 {
  높이: 자동;
}
#어린이40 {
  높이: 40px;
  오버플로: 숨김;
  배경색: #dedede;
  -moz-transition: 높이 1초 용이성;
  -webkit-transition: 높이 1초 용이성;
  -o-전환: 높이 1초 용이성;
  전환: 높이 1초 용이함;
}
#parent40:호버 #child40 {
  높이: 자동;
}
h1 {
  글꼴 두께: 굵게;
}

두 CSS 조각 사이의 유일한 차이점은 하나의 높이가 0이고 다른 하나의 높이가 40이라는 것입니다.
<시간>

  
Hover me (높이: 0)
  
일부 콘텐츠
    
일부 콘텐츠
    
일부 콘텐츠
    
일부 콘텐츠
    
일부 콘텐츠
    
일부 콘텐츠
    

  

<시간>

  
Hover me (높이: 40)
  
일부 콘텐츠
    
일부 콘텐츠
    
일부 콘텐츠
    
일부 콘텐츠
    
일부 콘텐츠
    
일부 콘텐츠
    

  

Answer 1

scaleY를 사용해야 합니다.

으아악 으아악

저는 jsfiddle에서 위 코드의 공급업체 접두사 버전을 만들고 높이 대신 scaleY를 사용하도록 jsfiddle을 변경했습니다.

편집 대신 어떤 사람들은 scaleY 转换内容的方式。如果这是一个问题，那么我建议使用 clip을 좋아하지 않습니다.

으아악 으아악

Answer 2

전환에 max-height，而不是height。并将 max-height를 사용하고 값을 상자보다 큰 값으로 설정하세요.

Chris Jordan의 답변은 여기에서 다른 JSFiddle 데모 /stackoverflow.com/a/20226830/18706에서 확인하세요.

으아악 으아악