如何转换高度:0;到高度:自动;使用CSS?
我正在尝试使用CSS转换制作一个如何转换高度:0;到高度:自动;使用CSS?,css,css-transitions,Css,Css Transitions,我正在尝试使用CSS转换制作一个幻灯片 从高度开始:0。悬停时,高度设置为height:auto。然而,这导致它只是出现,而不是过渡 如果我从高度做:40px至高度:自动,然后它将向上滑动到高度:0,然后突然跳到正确的高度 如果不使用JavaScript,我还能做什么 #child0{ 身高:0; 溢出:隐藏; 背景色:#dedede; -moz过渡:高度1s轻松; -webkit过渡:高度1s轻松; -o型过渡:高度1s; 过渡:高度1秒; } #parent0:hover#child0{
幻灯片
从高度开始:0代码>。悬停时,高度设置为height:auto代码>。然而,这导致它只是出现,而不是过渡
如果我从高度做:40px代码>至<代码>高度:自动
,然后它将向上滑动到高度:0代码>,然后突然跳到正确的高度
如果不使用JavaScript,我还能做什么
#child0{
身高:0;
溢出:隐藏;
背景色:#dedede;
-moz过渡:高度1s轻松;
-webkit过渡:高度1s轻松;
-o型过渡:高度1s;
过渡:高度1秒;
}
#parent0:hover#child0{
高度:自动;
}
#孩子40{
高度:40px;
溢出:隐藏;
背景色:#dedede;
-moz过渡:高度1s轻松;
-webkit过渡:高度1s轻松;
-o型过渡:高度1s;
过渡:高度1秒;
}
#父母40:悬停#孩子40{
高度:自动;
}
h1{
字体大小:粗体;
}
CSS的两个片段之间的唯一区别是一个片段的高度为0,另一个片段的高度为40。
将我悬停(高度:0)
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
将我悬停(高度:40)
一些内容
一些内容
一些内容
一些内容
一些内容
一些内容
你可以,只需要一点非语义的把戏。我通常的方法是设置一个外部DIV的高度动画,该DIV有一个子DIV,它是一个无样式的DIV,仅用于测量内容高度
函数growDiv(){
var growDiv=document.getElementById('grow');
if(增长率、增长率){
growDiv.style.height=0;
}否则{
var wrapper=document.querySelector('.measuringWrapper');
growDiv.style.height=wrapper.clientHeight+“px”;
}
}
#成长{
-moz过渡:高度0.5s;
-ms转换:高度0.5s;
-o型过渡:高度5s;
-webkit过渡:高度0.5s;
过渡:高度5s;
身高:0;
溢出:隐藏;
轮廓:1px纯红;
}
我的div的内容。
我的div的内容。
我的div的内容。
我的div的内容。
我的div的内容。
我的div的内容。
当前无法在高度上设置动画,当其中一个高度为“自动”时,必须设置两个明确的高度。如果同时提供“最小高度”和“最大高度”,则可以从“高度:0”转换为“高度:自动”
div.stretchy{
过渡:1s线性;
}
有弹性的,隐藏的{
身高:0;
}
有弹性的,可见的{
高度:自动;
最小高度:40px;
最大高度:400px;
}
我意识到这个帖子已经过时了,但它在某些谷歌搜索中排名靠前,所以我认为它值得更新
还可以获取/设置元素自身的高度:
var load_height = document.getElementById('target_box').clientHeight;
document.getElementById('target_box').style.height = load_height + 'px';
您应该在内联脚本标记中的target_box的closing标记之后立即转储此Javascript。使用CSS3转换设置高度动画的视觉解决方法是设置填充动画
您并没有完全获得擦除效果,但是使用过渡持续时间和填充值应该可以让您更接近。如果您不想显式设置height/max height,这应该是您想要的
div{
身高:0;
溢出:隐藏;
填充:0 18px;
-webkit过渡:全部。5s轻松;
-moz过渡:全部5秒轻松;
过渡:所有。5s轻松;
}
动画组{
高度:自动;
填充:24px 18px;
}
(摘自Stephenband在JSFIDLE上面的内容)这里有一个我刚刚与jQuery结合使用的解决方案。这适用于以下HTML结构:
<nav id="main-nav">
<ul>
<li>
<a class="main-link" href="yourlink.html">Link</a>
<ul>
<li><a href="yourlink.html">Sub Link</a></li>
</ul>
</li>
</ul>
</nav>
然后,您可以使用单击功能,使用css()
CSS:
在转换中使用max height
,而不是height
。并在max height
上设置一个值,使其大于您的盒子所能获得的值
请参阅Chris Jordan在另一篇文章中提供的内容
#菜单#列表{
最大高度:0;
过渡:最大高度0.15s放松;
溢出:隐藏;
背景#d5d5d5;
}
#菜单:悬停#列表{
最大高度:500px;
过渡:最大高度0.25s缓进;
}
盘旋我
- 项目
- 项目
- 项目
- 项目
- 项目
我的解决方法是将“最大高度”转换为精确的内容高度,以生成一个平滑的动画,然后使用transitionEnd回调将“最大高度”设置为9999px,以便内容可以自由调整大小
var content=$('#content');
content.inner=$('#content.inner');//内部div需要在关闭时获取内容的大小
//css转换回调
content.on('transitionEnd WebKittTransitionEnd transitionEnd transitionEnd OrtTransitionEnd msTransitionEnd',函数(e){
if(content.hasClass('open')){
css('max-height',9999);//尝试将此设置为'none'…我敢打赌!
}
});
$('#toggle')。打开('click',函数(e){
content.toggleClass('open-closed');
content.contentHeight=content.outerHeight();
if(content.hasClass('closed')){
//禁用转换并将“最大高度”设置为“内容高度”
content.removeClass('transitions').css('max-height',content.contentHeight);
setTimeout(函数(){
//启用和启动转换
content.addClass('transitions').css({
“最大高度”:0,
“不透明度”:0
});
},10);//10ms超时是禁用/启用传输的秘密要素
$('#main-nav li ul').each(function(){
$me = $(this);
//Count the number of li elements in this UL
var liCount = $me.find('li').size(),
//Multiply the liCount by the height + the margin on each li
ulHeight = liCount * 28;
//Store height in the data-height attribute in the UL
$me.attr("data-height", ulHeight);
});
$('#main-nav li a.main-link').click(function(){
//Collapse all submenus back to 0
$('#main-nav li ul').removeAttr('style');
$(this).parent().addClass('current');
//Set height on current submenu to it's height
var $currentUl = $('li.current ul'),
currentUlHeight = $currentUl.attr('data-height');
})
#main-nav li ul {
height: 0;
position: relative;
overflow: hidden;
opacity: 0;
filter: alpha(opacity=0);
-ms-filter: "alpha(opacity=0)";
-khtml-opacity: 0;
-moz-opacity: 0;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;
-ms-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
}
#main-nav li.current ul {
opacity: 1.0;
filter: alpha(opacity=100);
-ms-filter: "alpha(opacity=100)";
-khtml-opacity: 1.0;
-moz-opacity: 1.0;
}
.ie #main-nav li.current ul { height: auto !important }
#main-nav li { height: 25px; display: block; margin-bottom: 3px }
div.class{
min-height:1%;
max-height:200px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
overflow:hidden;
}
div.class:hover{
min-height:100%;
max-height:3000px;
}
$('button').bind('click', function(e) {
e.preventDefault();
w = $('#outer');
if (w.hasClass('collapsed')) {
w.css({ "max-height": $('#inner').outerHeight() + 'px' });
} else {
w.css({ "max-height": "0px" });
}
w.toggleClass('collapsed');
});
/*** Nothing out of the ordinary in your styles ***/
<style>
div {
height: 0;
overflow: hidden;
transition: height 1s;
}
</style>
/*** Just add and remove one attribute and transition to/from auto! ***/
<div>
I have tons of content and I am 0px in height you can't see me...
</div>
<div reveal>
I have tons of content and I am 0px in height you can't see me...
but now that you added the 'reveal' attribute,
I magically transitioned to full height!...
</div>
(function(doc){
/* feature detection for browsers that report different values for scrollHeight when an element's overflow is hidden vs visible (Firefox, IE) */
var test = doc.documentElement.appendChild(doc.createElement('x-reveal-test'));
test.innerHTML = '-';
test.style.cssText = 'display: block !important; height: 0px !important; padding: 0px !important; font-size: 0px !important; border-width: 0px !important; line-height: 1px !important; overflow: hidden !important;';
var scroll = test.scrollHeight || 2;
doc.documentElement.removeChild(test);
var loading = true,
numReg = /^([0-9]*\.?[0-9]*)(.*)/,
skipFrame = function(fn){
requestAnimationFrame(function(){
requestAnimationFrame(fn);
});
},
/* 2 out of 3 uses of this function are purely to work around Chrome's catastrophically busted implementation of auto value CSS transitioning */
revealFrame = function(el, state, height){
el.setAttribute('reveal-transition', 'frame');
el.style.height = height;
skipFrame(function(){
el.setAttribute('reveal-transition', state);
el.style.height = '';
});
},
transitionend = function(e){
var node = e.target;
if (node.hasAttribute('reveal')) {
if (node.getAttribute('reveal-transition') == 'running') revealFrame(node, 'complete', '');
}
else {
node.removeAttribute('reveal-transition');
node.style.height = '';
}
},
animationstart = function(e){
var node = e.target,
name = e.animationName;
if (name == 'reveal' || name == 'unreveal') {
if (loading) return revealFrame(node, 'complete', 'auto');
var style = getComputedStyle(node),
offset = (Number(style.paddingTop.match(numReg)[1])) +
(Number(style.paddingBottom.match(numReg)[1])) +
(Number(style.borderTopWidth.match(numReg)[1])) +
(Number(style.borderBottomWidth.match(numReg)[1]));
if (name == 'reveal'){
node.setAttribute('reveal-transition', 'running');
node.style.height = node.scrollHeight - (offset / scroll) + 'px';
}
else {
if (node.getAttribute('reveal-transition') == 'running') node.style.height = '';
else revealFrame(node, 'running', node.scrollHeight - offset + 'px');
}
}
};
doc.addEventListener('animationstart', animationstart, false);
doc.addEventListener('MSAnimationStart', animationstart, false);
doc.addEventListener('webkitAnimationStart', animationstart, false);
doc.addEventListener('transitionend', transitionend, false);
doc.addEventListener('MSTransitionEnd', transitionend, false);
doc.addEventListener('webkitTransitionEnd', transitionend, false);
/*
Batshit readyState/DOMContentLoaded code to dance around Webkit/Chrome animation auto-run weirdness on initial page load.
If they fixed their code, you could just check for if(doc.readyState != 'complete') in animationstart's if(loading) check
*/
if (document.readyState == 'complete') {
skipFrame(function(){
loading = false;
});
}
else document.addEventListener('DOMContentLoaded', function(e){
skipFrame(function(){
loading = false;
});
}, false);
/* Styles that allow for 'reveal' attribute triggers */
var styles = doc.createElement('style'),
t = 'transition: none; ',
au = 'animation: reveal 0.001s; ',
ar = 'animation: unreveal 0.001s; ',
clip = ' { from { opacity: 0; } to { opacity: 1; } }',
r = 'keyframes reveal' + clip,
u = 'keyframes unreveal' + clip;
styles.textContent = '[reveal] { -ms-'+ au + '-webkit-'+ au +'-moz-'+ au + au +'}' +
'[reveal-transition="frame"] { -ms-' + t + '-webkit-' + t + '-moz-' + t + t + 'height: auto; }' +
'[reveal-transition="complete"] { height: auto; }' +
'[reveal-transition]:not([reveal]) { -webkit-'+ ar +'-moz-'+ ar + ar +'}' +
'@-ms-' + r + '@-webkit-' + r + '@-moz-' + r + r +
'@-ms-' + u +'@-webkit-' + u + '@-moz-' + u + u;
doc.querySelector('head').appendChild(styles);
})(document);
document.addEventListener('click', function(e){
if (e.target.nodeName == 'BUTTON') {
var next = e.target.nextElementSibling;
next.hasAttribute('reveal') ? next.removeAttribute('reveal') : next.setAttribute('reveal', '');
}
}, false);
.parent{ position:relative; overflow:hidden; }
/** shown state */
.child {
position:absolute;top:0;:left:0;right:0;bottom:0;
height: 100%;
transition: transform @overlay-animation-duration ease-in-out;
.translate(0, 0);
}
/** Animate to hidden by sliding down: */
.child.slidedown {
.translate(0, 100%); /** Translate the element "out" the bottom of it's .scene container "mask" so its hidden */
}
<a href="#" id="trigger">Hover</a>
<ul id="toggled">
<li>One</li>
<li>Two</li>
<li>Three</li>
<ul>
#toggled{
max-height: 0px;
transition: max-height .8s cubic-bezier(0, 1, 0, 1) -.1s;
}
#trigger:hover + #toggled{
max-height: 9999px;
transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
transition-delay: 0s;
}
<div data-mutant-attributes="height">
This is an example with mutant-transition
</div>
.wrap { overflow:hidden; }
.inner {
margin-top:-100%;
-webkit-transition:margin-top 500ms;
transition:margin-top 500ms;
}
.inner.open { margin-top:0px; }
<div class="wrap">
<div class="inner">Some Cool Content</div>
</div>
ul {
height: 0;
transition: height 1s; /* An example transition. */
}
ul.style.height = ul.scrollHeight + "px";
ul.style.height = "0";
ul.style.removeProperty("height");