我正在尝试使用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

其他回答

可以通过使用片段路径创建反向(塌陷)动画来实现这一点。

#子0{显示:无;}#parent0:悬停#child0{显示:块;动画:高度动画;动画持续时间:200ms;动画计时功能:线性;动画填充模式:向后;动画迭代次数:1;动画延迟:200ms;}@关键帧高度动画{0% {剪辑路径:多边形(0%0%,100%0.00%,100%0%,0%0%);}100% {剪辑路径:多边形(0%0%,100%0.00%,100%100%,0%100%);}}<div id=“parent0”><h1>将我悬停(高度:0)</h1><div id=“child0”>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br>一些内容<br></div></div>

Flexbox解决方案

赞成的意见:

易于理解的无JS平滑过渡

欺骗:

元素需要放在固定高度的柔性容器中

它的工作方式是始终具有灵活的基础:在元素上自动添加内容,并转换为灵活增长和灵活收缩。

编辑:受Xbox One界面启发,改进了JS Fiddle。

* {边距:0;填充:0;框大小调整:边框框;过渡:0.25s;字体系列:单空间;}正文{边距:10px 0 0 10px;}.box格式{宽度:150px;高度:150px;边距:0 2px 10px 0;背景:#2d333b;边框:实心10px#20262e;溢出:隐藏;显示:内联flex;弯曲方向:柱;}.空格{弹性基础:100%;挠曲生长:1;挠曲收缩:0;}p型{弹性基础:自动;柔性增长:0;挠曲收缩:1;背景:#20262e;填充:10px;宽度:100%;文本对齐:左侧;颜色:白色;}.box:悬停.space{柔性增长:0;挠曲收缩:1;}.box:悬停p{挠曲生长:1;挠曲收缩:0;}<div class=“box”><div class=“space”></div><p>超级Metroid Prime Fusion</p></div><div class=“box”><div class=“space”></div><p>《生化危机2》翻拍</p></div><div class=“box”><div class=“space”></div><p>Yolo游戏</p></div><div class=“box”><div class=“space”></div><p>《最终幻想7》重制版+所有附加DLC+金色礼帽</p></div><div class=“box”><div class=“space”></div><p>德普维尔</p></div>

JS小提琴

没有最大高度,使用相对定位,在li元素上工作,并且是纯CSS:

除了Firefox,我没有在其他任何地方进行过测试,尽管从CSS来看,它应该可以在所有浏览器上运行。

小提琴:http://jsfiddle.net/n5XfG/2596/

CSS

.wrap { overflow:hidden; }

.inner {
            margin-top:-100%;
    -webkit-transition:margin-top 500ms;
            transition:margin-top 500ms;
}

.inner.open { margin-top:0px; }

HTML

<div class="wrap">
    <div class="inner">Some Cool Content</div>
</div>

我想添加一个关于如何扩展/折叠以保持文档流的示例,这个示例适用于使用tailwindcss的React应用程序

export function Collapse({ collapsed = true, children }) {
  return (
    <div className="grid">
      <div className="flex flex-col">
        <div className={`transition-all duration-500 overflow-hidden ${collapsed ? 'basis-0' : 'flex-1'}`}>
          {children}
        </div>
      </div>
    </div>
  );
}

深入阅读:https://stackoverflow.com/a/69871346/9226510

具有行高、填充、不透明度和边距的可选CSS解决方案:

正文{背景色:亚麻;}主要的,主要的{背景色:白色;}[id^=“toggle_”]~.content{线条高度:0;不透明度:0;填充:0.5雷姆;过渡:.2s缓和;}[id^=“toggle_”]~.content>p{边距:0;过渡:.2s缓和;}[id^=“toggle_”]:选中~.content{不透明度:1;衬垫:.5rem;线高:1.5;}[id^=“toggle_”]:选中~.content p{边距底部:.75rem;}[id^=“toggle_”]+标签{显示:柔性;调整内容:间距;衬垫:0.5em 1em;背景:灯光转向蓝;边框底部:1px实心灰色;光标:指针;}[id^=“toggle_”]+标签:之前{content:“显示”;}[id^=“toggle_”]:选中+标签:之前{content:“隐藏”;}[id^=“toggle_”]+标签:之后{内容:“\25BC”;}[id^=“toggle_”]:选中+标签:之后{内容:“\25B2”;}<main><div><input type=“checkbox”id=“toggle_1”隐藏><label for=“toggle_1”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Duis dolor neque,准将leo ut,拍卖人tincidunt mauris。Nunc frigilla tincidunt metus,非孕妇lorem调味品非。Duis ornare purus nisl,位于埃格特拱门。整数lorem ante,porta vulputate dui ut,blandit tempor tellus。Proin facilisis bibendum直径,位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p></div></div><div><input type=“checkbox”id=“toggle_2”隐藏><label for=“toggle_2”hidden></label><div class=“content”><p>我不能坐在拍卖行旁边。Vivamus sed nisi vite nibh调味品pulvinar eu vel lorem。生命的前阶段是一个非常容易的阶段。在外的大型流苏。做一个临时自由人。Donec sapien libero,lacinia sed aliquet ut,imperite finibus tellus。努克·泰勒斯·莱图斯,波苏雷侯爵的朗库斯,坦普斯坐在埃尼姆。Morbi等人使用了一种边缘数字丝绒。Donec commodo,est id accumsan cursus,diam dui hendrerit nisi,vel hendreritpurus dolor ut risus。Phasellus mattis egestas ipsum sed ullamcorper。在直径舌中,rhoncus vel enim et,impredite porta justo。Curabitur vulputate hendrerit nisl,et ultricies diam.Maecenas ac leo a diam cursus ornare nec eu quam。</p><p>Sed非vulputate purus,Sed consectetur odio。Sed non-nih frigilla,impressive odio nec,efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特(Maecenas felis augus),坐在埃米特·塞姆·费利利亚(sem frigilla)上,坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor,ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt,libero quis scelerisque bibendum,ligula nisi gravida libero,id lacinia nulla leo in elit。</p><p>Aenean aliquam risus id consectetur sagitis。Aliquam Aliquam nisl eu预示着诅咒,意味着最大的痛苦。Aliquam ipsum dolor,tempor et justo ac,fermentum mattis dui。伊蒂安在波苏雷舌。Vestibulum tortor metus,viverra vitae mi non,laoret iaculis purus。Praesent vel semper笔尖。Curabitur一只刚果拉库斯。在et pellentesque lorem。Morbi posuere猫科动物,无直径壳核,无壳核。Vivamus ultricies、massa id sagitis consequat、sem mauris tincidunt nunc、eu vehicula augus quam ut mauris。</p></div></div><div><input type=“checkbox”id=“toggle_3”hidden><label for=“toggle_3”hidden></label><div class=“content”><p>Lorem ipsum dolor坐amet,consectetur adipiscing elit。Duis dolor neque,准将leo ut,拍卖人tincidunt mauris。Nunc frigilla tincidunt metus,非孕妇lorem调味品非。Duis ornare purus nisl,位于埃格特拱门。整数lorem ante,porta vulputate dui ut,blandit tempor tellus。Proin facilisis bibendum直径,位于调味品中。Donec volutpat dui eu mollis vulputate。Nunc commodo lobortis Nunc at ultrices。吊耳中的吊耳直径。</p><p>Sed非vulputate purus,Sed consectetur odio。Sed non-nih frigilla,impressive odio nec,efficitur ex.Suspendiss ut dignissim enim。迈塞纳斯·费利斯·奥古斯特(Maecenas felis augus),坐在埃米特·塞姆·费利利亚(sem frigilla)上,坐在艾姆桑·费利利亚的笔尖上。Quisque posuere lacus tortor,ques malesuada magna elementum a.Nullam id purus in pre terstie tincidunt。Morbi luctus orci eu egestas dignissim。Sed tincidunt,libero quis scelerisque bibendum,ligula nisi gravida libero,id lacinia nulla leo in elit。</p></div></div></main>