css3 高度过渡不起作用

Answer 1

我相信你需要设置一个指定的高度而不是自动。 http://jsfiddle.net/BN4Ny/ 这可以顺利扩展。但不确定你是否想要那种小的关闭打开效果。我刚刚分叉了你的 jsfiddle 并添加了指定的高度。

Answer 2

这个解决方案不需要javascript，也没有需要预先确定容器高度的问题。

这是通过使用

max-height

属性并将其值设置为较高值来实现的。

#imgs {
    border:1px solid #000;
    border-radius:3px;
    max-height:20px;
    width:100%;
    overflow:hidden;
    transition: 2s ease;
}
#imgs:hover {
    max-height:15em;
}

<div id="imgs">
  <img src="https://picsum.photos/seed/picsum/400/600" />
</div>

Answer 3

您可以将图像放在列表项中，然后在 li 上进行转换，而不是在容器上使用设定的高度或使用 JS（这都是尴尬的解决方案）。

如果所有图像的高度相似，则意味着容器内的内容仍然可以是动态的。例如...

/*
CLOSED
*/

div.container li 

{  height:0px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

/*
OPEN
*/

div.container:hover li 

{  height:30px;

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;}

Answer 4

以下是具体操作方法：http://jsfiddle.net/minitech/hTzt4/

不幸的是，为了保持灵活的高度，JavaScript 是必需的。

Answer 5

我正在使用这个方法： 使用最大高度来过渡高度而不是直接高度... 例如：

div {
     height: auto;
     max-height:0;
 }

   .toggle-above-div:hover div {
    max-height:0;
  }

Answer 6

使用

grid

，您可以使用 过渡，而无需向元素添加特定高度。

document.querySelector("button").addEventListener("click", e => {
  document.querySelector(".wrapper").classList.toggle("open")
})

.content{
  min-height: 0;
  text-align: justify;
}

.wrapper{
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 200ms;
  width: 300px;
}

.wrapper.open {
  grid-template-rows: 1fr;
}

<button>Toggle</button>
<div class="wrapper">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quantum Aristoxeni ingenium consumptum videmus in musicis? Tum Quintus: Est plane, Piso, ut dicis, inquit. Duo Reges: constructio interrete. Qui-vere falsone, quaerere mittimus-dicitur oculis se privasse; Satis est tibi in te, satis in legibus, satis in mediocribus amicitiis praesidii. Quamquam tu hanc copiosiorem etiam soles dicere. Hoc est non modo cor non habere, sed ne palatum quidem. Non est ista, inquam, Piso, magna dissensio. Et nunc quidem quod eam tuetur, ut de vite potissimum loquar, est id extrinsecus; Quod cum dixissent, ille contra.
  </div>
</div>