어떻게 전환 할 수 있습니까? 0;높이 : 자동;CSS 사용?
질문
CSS 전환을 사용하여
- 슬라이드를 만들려고합니다.
- 은 높이에서 시작됩니다. 0;호버에서 높이는 높이로 설정됩니다. 자동;그러나 이것은 단순히 전환하지 않고, 단순히 나타나는 것입니다.
높이에서 그것을하는 경우 : 40px;높이 : Auto;, 그렇다면 높이까지 미끄러 져 올바른 높이로 갑자기 점프합니다.
JavaScript를 사용하지 않고 다른이를 어떻게 할 수 있습니까?
# child0 { 높이 : 0; 오버플로 : 숨겨진; 배경색 : #dededed; -moz-transition : 높이 1s 쉽게; -webkit-transition : 높이 1s 쉽게; -o-transition : 높이 1s 쉽게; 전환 : 높이 1s 쉽게; } # parent0 : Hover # child0 { 높이 : 자동; } # child40 { 높이 : 40px; 오버플로 : 숨겨진; 배경색 : #dededed; -moz-transition : 높이 1s 쉽게; -webkit-transition : 높이 1s 쉽게; -o-transition : 높이 1s 쉽게; 전환 : 높이 1s 쉽게; } # parent40 : 호버 # child40 { 높이 : 자동; } H1 { 글꼴 무게 : 굵게; } CSS의 두 개의 스 니펫 간의 유일한 차이점은 높이 : 0, 다른 높이 : 40.
나이오 (높이 : 0)
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
.
나이오 (높이 : 40)
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
답변
천사가 아니라 높이가 아닌 최대 높이를 사용하십시오.그리고 상자보다 큰 것보다 큰 값으로 값을 설정하십시오.
Chris Jordan이 제공하는 JSFiddle 데모를 다른 대답으로 제공합니다.
#menu #list {
최대 높이 : 0;
전환 : 최대 높이 0.15S 용이성;
오버플로 : 숨겨진;
배경 : # D5D5D5;
}
#menu : 호버 #list {
최대 높이 : 500px;
전환 : 최대 높이 0.25S 편리함;
}
현재 높이가 포함 된 높이가 자동으로 애니메이션을 사용할 수 없으면 두 개의 명시 적 높이를 두 개로 설정해야합니다.
답변
내가 항상 사용한 솔루션은 처음으로 페이드 아웃 한 다음 글꼴 크기, 패딩 및 여백 값을 줄이는 것이 었습니다.그것은 닦아와 동일하게 보이지 않지만 정적 높이 또는 최대 높이없이 작동합니다.
작업 예 :
/ * 최종 디스플레이 * /
#menu #list {
마진 : .5em 1em;
패딩 : 1em;
}
/* 숨다 */
#MENU : NOT (: 호버) #LIST {
글꼴 크기 : 0;
여백 : 0;
불투명도 : 0;
패딩 : 0;
/ * 퇴색 한 다음 수축 * /
전환 : 불투명도 .25s,
글꼴 크기 .5s .25s,
마진 .5s .25,
패딩 .5s .25;
}
/* 드러내다 */
#menu : 호버 #list {
/ * unshrink, 그 다음에 퇴색 * /
전환 : 글꼴 크기 .25s,
마진 .25s,
패딩 .25s,
불투명도 .5s .25s;
}
반응형
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
나이오 (높이 : 40)
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
답변
천사가 아니라 높이가 아닌 최대 높이를 사용하십시오.그리고 상자보다 큰 것보다 큰 값으로 값을 설정하십시오.
Chris Jordan이 제공하는 JSFiddle 데모를 다른 대답으로 제공합니다.
#menu #list {
최대 높이 : 0;
전환 : 최대 높이 0.15S 용이성;
오버플로 : 숨겨진;
배경 : # D5D5D5;
}
#menu : 호버 #list {
최대 높이 : 500px;
전환 : 최대 높이 0.25S 편리함;
}
현재 높이가 포함 된 높이가 자동으로 애니메이션을 사용할 수 없으면 두 개의 명시 적 높이를 두 개로 설정해야합니다.
답변
내가 항상 사용한 솔루션은 처음으로 페이드 아웃 한 다음 글꼴 크기, 패딩 및 여백 값을 줄이는 것이 었습니다.그것은 닦아와 동일하게 보이지 않지만 정적 높이 또는 최대 높이없이 작동합니다.
작업 예 :
/ * 최종 디스플레이 * /
#menu #list {
마진 : .5em 1em;
패딩 : 1em;
}
/* 숨다 */
#MENU : NOT (: 호버) #LIST {
글꼴 크기 : 0;
여백 : 0;
불투명도 : 0;
패딩 : 0;
/ * 퇴색 한 다음 수축 * /
전환 : 불투명도 .25s,
글꼴 크기 .5s .25s,
마진 .5s .25,
패딩 .5s .25;
}
/* 드러내다 */
#menu : 호버 #list {
/ * unshrink, 그 다음에 퇴색 * /
전환 : 글꼴 크기 .25s,
마진 .25s,
패딩 .25s,
불투명도 .5s .25s;
}
반응형
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
일부 콘텐츠
답변
천사가 아니라 높이가 아닌 최대 높이를 사용하십시오.그리고 상자보다 큰 것보다 큰 값으로 값을 설정하십시오.
Chris Jordan이 제공하는 JSFiddle 데모를 다른 대답으로 제공합니다.
#menu #list { 최대 높이 : 0; 전환 : 최대 높이 0.15S 용이성; 오버플로 : 숨겨진; 배경 : # D5D5D5; } #menu : 호버 #list { 최대 높이 : 500px; 전환 : 최대 높이 0.25S 편리함; }
현재 높이가 포함 된 높이가 자동으로 애니메이션을 사용할 수 없으면 두 개의 명시 적 높이를 두 개로 설정해야합니다.
답변
내가 항상 사용한 솔루션은 처음으로 페이드 아웃 한 다음 글꼴 크기, 패딩 및 여백 값을 줄이는 것이 었습니다.그것은 닦아와 동일하게 보이지 않지만 정적 높이 또는 최대 높이없이 작동합니다.
작업 예 :
/ * 최종 디스플레이 * / #menu #list { 마진 : .5em 1em; 패딩 : 1em; } /* 숨다 */ #MENU : NOT (: 호버) #LIST { 글꼴 크기 : 0; 여백 : 0; 불투명도 : 0; 패딩 : 0; / * 퇴색 한 다음 수축 * / 전환 : 불투명도 .25s, 글꼴 크기 .5s .25s, 마진 .5s .25, 패딩 .5s .25; } /* 드러내다 */ #menu : 호버 #list { / * unshrink, 그 다음에 퇴색 * / 전환 : 글꼴 크기 .25s, 마진 .25s, 패딩 .25s, 불투명도 .5s .25s; }
최근댓글