我正在尝试使用CSS转换制作一个<ul>幻灯片。
<ul>开始于高度:0;。悬停时,高度设置为height:auto;。然而,这导致它简单地出现,
如果我从高度做:40px;至高度:自动;,那么它将向上滑动到高度:0;,然后突然跳到正确的高度。
如果不使用JavaScript,我怎么能做到这一点?
#子0{高度:0;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent0:悬停#child0{高度:自动;}#孩子40{高度:40px;溢出:隐藏;背景色:#dedede;-moz过渡:高度1s容易;-webkit过渡:高度1s轻松;-o过渡:高度1s容易;过渡:高度1s;}#parent40:悬停#child40{高度:自动;}h1小时{字号:粗体;}两个CSS片段之间的唯一区别是一个高度为0,另一个高度是40。<小时><div id=“parent0”><h1>将我悬停(高度:0)</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div><小时><div id=“parent40”><h1>将我悬停(高度:40)</h1><div id=“child40”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>
编辑:向下滚动以获得更新的答案我在做一个下拉列表,看到了这篇文章。。。很多不同的答案,但我决定分享我的下拉列表。。。它并不完美,但至少它将只使用css进行下拉!我一直在使用transform:translateY(y)将列表转换为视图。。。你可以在测试中看到更多http://jsfiddle.net/BVEpc/4/ 我把div放在每一个li后面,因为我的下拉列表是从上到下的,为了正确地显示它们,这是需要的,我的div代码是:
#menu div {
transition: 0.5s 1s;
z-index:-1;
-webkit-transform:translateY(-100%);
-webkit-transform-origin: top;
}
并且悬停是:
#menu > li:hover div {
transition: 0.5s;
-webkit-transform:translateY(0);
}
因为ul高度设置为可以超过你身体内容的内容,所以我为ul做了这件事:
#menu ul {
transition: 0s 1.5s;
visibility:hidden;
overflow:hidden;
}
并悬停:
#menu > li:hover ul {
transition:none;
visibility:visible;
}
转换后的第二次是延迟,它将在我的下拉列表被动画关闭后隐藏。。。希望以后有人能从中受益。编辑:我真不敢相信人们真的使用了这个原型!此下拉菜单仅用于一个子菜单,仅此而已!!我更新了一个更好的,可以有两个子菜单,用于ltr和rtl方向,支持IE8。LTR的FiddleRTL的Fiddle希望将来有人会发现这很有用。
下面是我刚刚与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>
以及功能:
$('#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);
});
然后,您可以使用click函数使用css()设置和删除高度
$('#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');
})
CSS:
#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 }
我能够做到这一点。我有一个.child和一个.parent div。子div完全符合父div的宽度/高度,具有绝对定位。然后设置平移属性的动画,将其Y值降低100%。它的动画非常流畅,没有任何问题或缺点,就像这里的任何其他解决方案一样。
类似这样,伪代码
.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 */
}
您可以在.parent上指定一个高度,单位为px,%,或保留为auto。这个div然后在向下滑动时屏蔽掉.child div。
您应该改用scaleY。
上一页{背景色:#eee;变换:缩放Y(0);变换原点:顶部;转变:转变0.26s;}p: 悬停~ul{变换:缩放Y(1);}<p>将此悬停</p><ul><li>咖啡</li><li>茶</li><li>牛奶</li></ul>
我在jsfiddle上制作了上述代码的供应商前缀版本,并将jsfiddl更改为使用scaleY而不是height。
编辑有些人不喜欢scaleY如何转换内容。如果这是一个问题,那么我建议使用剪辑。
上一页{剪辑:矩形(自动,自动,0,自动);位置:绝对;边距:-1rem 0;衬垫:.5rem;颜色:白色;背景色:rgba(0、0、0和0.8);过渡特性:剪辑;过渡时间:0.5s;过渡时间函数:立方贝塞尔(0.175、0.885、0.32、1.275);}h3:悬停~ul,h3:活性~ul,ul:悬停{剪辑:矩形(自动,自动,10rem,自动);}<h3>悬停在此处</h3><ul><li>此列表</li><li>被剪裁</li><li>剪辑过渡</li><li>将显示它</li></ul><p>一些文本。。。</p>
接受的答案在大多数情况下都有效,但当您的div的高度变化很大时,它就不起作用了——动画的速度不取决于内容的实际高度,而且它看起来会很起伏。
您仍然可以使用CSS执行实际的动画,但您需要使用JavaScript来计算项目的高度,而不是尝试使用auto。不需要jQuery,但如果您想要兼容性,可能需要对其进行一些修改(适用于最新版本的Chrome:)。
window.toggleExpand=函数(元素){如果(!element.style.height | | element.syle.height=='0px'){element.style.height=数组.原型.减少.调用(element.childNodes,函数(p,c){return p+(c.offsetHeight ||0);},0)+“px”;}其他{element.style.height=“0px”;}}#菜单#列表{高度:0px;过渡:高度0.3s;背景:#d5d5d5;溢出:隐藏;}<div id=“menu”><input value=“Toggle list”type=“button”onclick=“toggleExpand(document.getElementById('list'));”><ul id=“list”><!-- 适用于动态大小的内容。--><li>项目</li><li><div style=“高度:100px;宽度:100px,背景:红色;”></div></li><li>项目</li><li>项目</li><li>项目</li></ul></div>