使用 CSS 向文本 expanding/collapsing 添加过渡

Question

我想在单击一行文本时添加一个平滑的过渡，我得到的只是一个即时展开。我还希望当我单击第 2 行时第 1 行缩回，就像现在一样，如果我单击 next/previous 行，这些行将保持展开状态。如果可能，我更愿意使用 CSS 或 HTML。

我尝试摆弄过渡，但当前行根本不起作用...

div:focus{
    transition: all 5s ease;
}

我卡住了...感谢任何帮助。提前致谢。

这是一个 jsfiddle： http://jsfiddle.net/jnsk3f2g/3/

Answer 1

最好的方法是使用 JavaScript。尽管 CSS 有一个可能的解决方案，方法是过渡可折叠内容的最大高度。看到这个 fiddle.

.toggle-text + label + div {
  max-height: 0;
  overflow: hidden;
  margin-bottom: 10px;
}

.toggle-text:checked + label + div {
  max-height: 100px;
}

div {
    transition: max-height 0.4s ease;
}

它不如 JS 解决方案可靠，因为它需要一个硬性数字，即最大高度。

Answer 2

我已经改变了你的Fiddle so that it always only lets one line be expanded, and added the transition. The height of the line that is being revealed is fixed, though. Like Will said in ，你也可以改变max-height，而不是我给这些元素的固定height，这样它就更有活力了。

使用 CSS 向文本 expanding/collapsing 添加过渡

Adding a transition to text expanding/collapsing using CSS

html

css

transition

collapse