具有CSS过渡的可扩展Div

Question

我的div页面顶部有一个包含一些标题文本,其中mouseenter,应该展开(高度),以显示一些较小的文本.然后,mouseleave它应该缩回.这比听起来更难......

解决方案必须:

1. 从高处开始,只适合标题,高度适合所有文本.
2. 从一个过渡到另一个.
3. 尝试使用纯CSS.
4. 如果鼠标离开,则扩展动画暂停,反之亦然(默认为CSS,但不是jQuery).

我试过了:

1. :hover在我的样式表中使用,从设置像素值更改auto为,如此问题中所示(但在我的中它是纯CSS).这没有过渡.
2. 在扩展时使用设置高度,这对不同的视口大小不起作用.
3. 如本问题所示,使用max-height并扩展到大于实际展开的大小.这意味着转换不能正常工作,并且在不同设备上看起来不同.div
4. 使用jQuery .animate()auto的像素值,然后创建一个转换,如本问题所示,但动画必须在开始下一个之前完成,这意味着一系列动画可以在用户的​​鼠标后很长一段时间内继续远离div.

请在此处查看以上四个示例.

如上所述,纯CSS将是理想的,但如果不可能,我会很好用JavaScript(我更喜欢jQuery).

谢谢!:)

Answer 1

我不知道有任何纯 CSS 解决方案可以将 \xe2\x80\x93 值转换为auto规范中未包含的内容；我认为这甚至是一个明确的决定，因为可能存在实施问题。

\n\n

但是对于 \xe2\x80\x9csimple\xe2\x80\x9d jQuery 解决方案，我\xe2\x80\x99d 只是将段落内容包装在一个额外的范围内，将初始段落高度设置为 0 并溢出：隐藏，保留过渡对于 \xe2\x80\x93 的高度，然后让 jQuery 只做一件事，读取 span 元素的高度，设置段落的高度，然后再次将其设置为 0 以再次淡出文本。

\n\n

.details {\n  height: 0;\n  margin: 0; \n  overflow: hidden;\n  transition: height 1s;\n}\n

\n\n

 

\n\n

$("div").mouseenter(function() {\n  $(this).find(\'p\').css(\'height\', $(this).find(\'span\').height());\n})\n\n$("div").mouseleave(function() {\n  $(this).find(\'p\').css(\'height\', 0);\n})\n

\n\n

这样，CSS 仍然可以通过transition（即可能应该在浏览器中进行优化），而 jQuery/JavaScript 只是用来给它一些 \xe2\x80\x9cnudge\xe2\x80\x9d 它需要知道做什么。（很确定 jQuery 现在也在内部做同样的事情animate()，如果浏览器支持它 \xe2\x80\x93 的话，额外的好处是 jQuery 会处理后备实现，如果一个非常旧的浏览器不支持transition; 在我的解决方案高度会立即改变，没有任何过渡。）

\n\n

https://jsfiddle.net/ypwu9n0g/7/

\n\n

请注意，在该示例中，所有四个项目的方法都是相同的，并且我没有费心更改文本内容;-)

\n