我正在尝试使用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>
Jake的最大高度解决方案效果很好,如果硬编码提供的最大高度值不比实际高度大多少(因为否则会出现不期望的延迟和定时问题)。另一方面,如果硬编码值意外为不大于实际高度,元件将不会完全打开。
以下仅限CSS的解决方案还需要硬编码大小应大于大多数实际尺寸。然而,这如果实际大小在某些情况下大于硬编码大小。在这种情况下,转换可能会跳一点,但它永远不会留下部分可见的元素。因此,该解决方案也可用于未知内容,例如数据库,您只需知道内容通常不会更大超过x像素,但也有例外。
想法是使用负值作为边距底部(或边距顶部用于稍微不同的动画),并将内容元素放置到带溢出的中间元素:隐藏。内容的负边距因此减小了中间元件的高度。
以下代码使用边距底部从-150px到0倍。只要内容元素不是高于150px。此外,它使用最大高度上的过渡中间元素从0px到100%。这最终隐藏了中间元素如果内容元素高于150px。对于最大高度,过渡仅用于延迟其应用关闭时一秒钟,而不是为了平滑的视觉效果(因此它可以从0px运行到100%)。
CSS:
.content {
transition: margin-bottom 1s ease-in;
margin-bottom: -150px;
}
.outer:hover .middle .content {
transition: margin-bottom 1s ease-out;
margin-bottom: 0px
}
.middle {
overflow: hidden;
transition: max-height .1s ease 1s;
max-height: 0px
}
.outer:hover .middle {
transition: max-height .1s ease 0s;
max-height: 100%
}
HTML格式:
<div class="outer">
<div class="middle">
<div class="content">
Sample Text
<br> Sample Text
<br> Sample Text
<div style="height:150px">Sample Test of height 150px</div>
Sample Text
</div>
</div>
Hover Here
</div>
边距底部的值应为负值,并尽可能接近可能达到内容元素的实际高度。如果是绝对的值)越大,则存在与最大高度解决方案,但只要硬编码的大小并不比实际大小大多少。如果绝对值边距底部的值小于变换有点跳跃。在任何情况下,过渡后内容元素被完全显示或完全移除。
有关详细信息,请参阅我的博客文章http://www.taccgl.org/blog/css_transition_display.html#combined_height
对于每个状态,使用具有不同过渡缓和和延迟的最大高度。
HTML格式:
<a href="#" id="trigger">Hover</a>
<ul id="toggled">
<li>One</li>
<li>Two</li>
<li>Three</li>
<ul>
CSS:
#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;
}
参见示例:http://jsfiddle.net/0hnjehjc/1/
Jake的最大高度解决方案效果很好,如果硬编码提供的最大高度值不比实际高度大多少(因为否则会出现不期望的延迟和定时问题)。另一方面,如果硬编码值意外为不大于实际高度,元件将不会完全打开。
以下仅限CSS的解决方案还需要硬编码大小应大于大多数实际尺寸。然而,这如果实际大小在某些情况下大于硬编码大小。在这种情况下,转换可能会跳一点,但它永远不会留下部分可见的元素。因此,该解决方案也可用于未知内容,例如数据库,您只需知道内容通常不会更大超过x像素,但也有例外。
想法是使用负值作为边距底部(或边距顶部用于稍微不同的动画),并将内容元素放置到带溢出的中间元素:隐藏。内容的负边距因此减小了中间元件的高度。
以下代码使用边距底部从-150px到0倍。只要内容元素不是高于150px。此外,它使用最大高度上的过渡中间元素从0px到100%。这最终隐藏了中间元素如果内容元素高于150px。对于最大高度,过渡仅用于延迟其应用关闭时一秒钟,而不是为了平滑的视觉效果(因此它可以从0px运行到100%)。
CSS:
.content {
transition: margin-bottom 1s ease-in;
margin-bottom: -150px;
}
.outer:hover .middle .content {
transition: margin-bottom 1s ease-out;
margin-bottom: 0px
}
.middle {
overflow: hidden;
transition: max-height .1s ease 1s;
max-height: 0px
}
.outer:hover .middle {
transition: max-height .1s ease 0s;
max-height: 100%
}
HTML格式:
<div class="outer">
<div class="middle">
<div class="content">
Sample Text
<br> Sample Text
<br> Sample Text
<div style="height:150px">Sample Test of height 150px</div>
Sample Text
</div>
</div>
Hover Here
</div>
边距底部的值应为负值,并尽可能接近可能达到内容元素的实际高度。如果是绝对的值)越大,则存在与最大高度解决方案,但只要硬编码的大小并不比实际大小大多少。如果绝对值边距底部的值小于变换有点跳跃。在任何情况下,过渡后内容元素被完全显示或完全移除。
有关详细信息,请参阅我的博客文章http://www.taccgl.org/blog/css_transition_display.html#combined_height
我理解这个问题需要一个没有JavaScript的解决方案。但对于那些感兴趣的人来说,这里是我的解决方案,只使用了一点点JS。
好的,因此默认情况下高度将更改的元素的css设置为height:0;打开高度时:自动;。它也有过渡:高度;。但当然,问题是它不会从高度转换到高度:自动;
因此,我所做的是在打开或关闭时将高度设置为元素的scrollHeight属性。这种新的内联样式将具有更高的特异性,并覆盖两种高度:auto;高度:0;并且过渡运行。
打开时,我添加了一个transitioned事件侦听器,它将只运行一次,然后删除内联样式,将其设置为height:auto;这将允许元素在必要时调整大小,就像在这个更复杂的子菜单示例中一样https://codepen.io/ninjabonsai/pen/GzYyVe
关闭时,我会在下一个事件循环循环后立即使用setTimeout删除内联样式,而不会延迟。这意味着高度:自动;被临时覆盖,这允许转换回高度0;
const showHideElement=(元素,打开)=>{element.style.height=element.scrollHeight+“px”;element.classList.tggle(“打开”,打开);if(打开){element.addEventListener('transitionnend',()=>{element.style.removeProperty('height');}, {一次:真});}其他{window.setTimeout(()=>{element.style.removeProperty('height');});}}const menu=document.body.querySelector(“#menu”);const list=document.body.querySelector(“#menu>ul”)menu.addEventListener('useenter',()=>showHideElement(列表,true));menu.addEventListener('useleave',()=>showHideElement(list,false));#菜单>ul{高度:0;溢出:隐藏;背景色:#999;过渡:高度。25s缓和;}#菜单>ul.open{高度:自动;}<div id=“menu”><a>悬停我</a><ul><li>项目</li><li>项目</li><li>项目</li><li>项目</li><li>项目</li></ul></div>