可扩展的 Div，在 CSS 中具有过渡功能

Expandable Div with Transition in CSS

本文关键字：功能 Div CSS 可扩展的      更新时间：2023-09-26

我在页面顶部有一个div，包含一些标题文本，mouseenter时，应该扩展(高度(，以显示一些较小的文本。然后，在mouseleave时，它应该收回。这比听起来更难...

解决方案必须：

  1. 从仅适合标题的高度到适合所有文本的高度。
  2. 从一个过渡到另一个。
  3. 尝试使用纯 CSS。
  4. 如果鼠标离开，则让扩展动画暂停，反之亦然(在 CSS 中默认，但在 jQuery 中不是(。

我试过：

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

在此处查看上述所有四个示例。

如前所述，纯CSS是理想的，但如果不可能，我会对JavaScript很好(我更喜欢jQuery(。

谢谢！ :)

我不知道有任何纯粹的 CSS 解决方案——将值转换为 auto 是规范中不包括的内容;我认为，这甚至是一个明确的决定，其基础是可能存在执行问题。

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

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

 

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

这样，CSS 仍然通过 transition 处理高度变化(

可能应该在浏览器中进行优化(进行"繁重的工作"，而 jQuery/JavaScript 仅用于给它一点"推动"它需要知道该做什么。 (非常确定 jQuery 现在也在内部做同样的事情，现在也用 animate() ， 如果浏览器支持它 – 如果一个非常旧的浏览器不支持transition，那么 jQuery 将负责回退实现;在我的解决方案中，高度会立即变化，没有任何过渡。

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

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

尝试使用 css :hover 

[id^="title"] {
  height: 1em;
  overflow: hidden;
  -webkit-transition: height 1s;
  /* Transitions not working */
  transition: height 1s;
}
[id^=title]:hover {
  height: 10em;
}

一种利用height、line-height、 font-size、opacity 的css方法 

[id^="title"] p {
  overflow:hidden;
  font-size:0em;
  line-height:0em;
  /* height:0px; */
  opacity:0;
  -webkit-transition: height 1s;
  transition: /* height 1s,*/ opacity 1s, line-height 0.1s;
}
[id^="title"]:hover p {
  /* height:auto; */
  opacity:1;
  line-height:1em;
  font-size:1em;
  opacity:1;
  text-overflow: ellipsis;
}
<div id="title1">Title 1<p id="details">Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition. Height working, but not transition.</p></div>
<div id="title2">Title 2<p id="details">Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size... Transition working, but only on one viewport size...</p></div>
<div id="title3">Title 3<p id="details">Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. Height working, but transitions looking different on different viewport sizes. </p></div>
<div id="title4">Title 4<p id="details">Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... Height and transition working - just one catch - the animation does not pause when a new one starts, creating a kind of animation stack that is annoying... </p></div>

JSFIDDLE https://jsfiddle.net/ypwu9n0g/17/

相关文章：