选项卡式元素上的动画CSS过渡

Question

我有一个jQuery选项卡元素,具有不同的选项卡高度.外部div具有动态高度,但是当内部元素更改标签时,我希望它能够平滑地调整大小.

我目前的CSS是:

.parent{
  width:500px;
  background:green;
  padding:20px;
  transition:all 1s;

}

.tab1{
  width:300px;
  height:100px;
  background:red;
}

.tab2{
  width:300px;
  height:500px;
  background:blue;
  display:none;
}

.parent button{
  display:inline-block;
  vertical-align:middle;
}

这个小提琴显示了这种行为:https://jsfiddle.net/mh5b91gx/

我尝试过使用min-height和max-height但是无法完成它.你能帮助我吗？

Answer 1

您可以在 CSS Tricks 上查看 Organic Tabs：https ://css-tricks.com/organic-tabs/ 。