표시 속성을 변경할 때 CSS3 전환이 실패하는 이유는 무엇입니까?

디스플레이 속성에서 CSS3 전환이 작동하지 않습니다

질문:

디스플레이 속성이 작동할 때 CSS3 전환이 작동하지 않는 이유는 무엇입니까? ~이다 수정되었습니까?

답변:

표시 속성이 "없음"으로 설정되면 전체 블록 요소가 효과적으로 숨겨져 전환 효과가 방지됩니다. 또는 불투명도를 사용하면 페이딩 효과와 더 부드러운 전환이 가능합니다.

대체 CSS 솔루션:

부드러운 전환 효과를 얻으려면 불투명도, 높이 및 패딩 속성을 조작하세요. 대신:

#header #button:hover > .content {
  opacity: 1;
  height: 150px;
  padding: 8px;
}

#header #button > .content {
  opacity: 0;
  height: 0;
  padding: 0 8px;
  overflow: hidden;
  transition: all .3s ease .15s;
}

일 중 데모:

[Fiddle](https://jsfiddle.net/alexdocker/KAyvL/)

추가 참고 사항:

• 간결함을 위해 공급업체 접두어는 생략했습니다.
• 귀하 보다 미묘한 전환 효과를 만들기 위해 테두리 반경을 조정하는 것도 고려할 수 있습니다.
• 유사한 통찰력을 얻으려면 이 [SO 토론](https://stackoverflow.com/questions/13691003/displaynone-css3-transition)을 참조하세요. .

위 내용은 표시 속성을 변경할 때 CSS3 전환이 실패하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!