Question

要求：我需要基于元素高度的平滑动画（由子元素驱动）

注意：请点击元素展开

JSFiddle ：https://jsfiddle.net/Lhmq0oqz/4/

我尝试了什么：元素结构如下

＆＃13;

document.querySelector('.parent').addEventListener('click', function(eve) {
  eve.currentTarget.className.indexOf('expand') == -1 ? eve.currentTarget.className = 'parent expand' : eve.currentTarget.className = 'parent';
});

＆＃13;

.parent {
  max-height: 200px;
  width: 400px;
  background-color: yellow;
  transition: max-height 1s ease;
  overflow: auto;
}
.child-wrap {
    width: 100%;
}
.child1 {
  width: 100%;
  background-color: green;
  transition: height 1s;
}

.child2 {
  height: 0px;
  width: 0px;
  background-color: red;
  transition: height 1s;
  
}
.parent.expand {
  max-height: 400px;
}
.expand .child-wrap{
  display:table
}
.expand .child2 {
  height: 100%;
  width: 30%;
  display: table-cell;
  
}
.expand .child1 {
  width: 70%;
  display: table-cell;
  
}
p {
  margin:0;
}

＆＃13;

<div class="parent">
  <div class="child-wrap">
    <div class="child1">
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
    </div>
    <div class="child2">
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
      <p>hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh hghjghjgjhhjh</p>
    </div>
  </div>
</div>

＆＃13;

规则：在父元素展开时，我只需要显示一个孩子。父元素在两个状态中都应具有特定的最大高度（折叠/展开）

我面临的问题：转换正朝着一个方向运行（折叠展开）但不会转移到其他方向（展开折叠）。

Answer 1

您还需要将过渡添加到child2元素，因为这是正在转换的元素

    .child2{
  height: 0px;
  width: 0px;
  background-color: red;
  transition:height 1s;
  }

jsFiddle

Answer 2

你可以试试这个，我刚刚为你的css子元素添加了一个过渡效果。

.parent{
  max-height: 200px;
  width: 400px;
  background-color: green;
  transition: max-height 1s ease;
  display: flex;
  overflow:auto;
}
.parent.expand{
  max-height: 400px;
}
.child1{
  width: 70%;
  height: 100px;
-webkit-transition: all 2s; /* Safari */
   transition: all 2s;
}
.child2{
  height: 0px;
  width: 0px;
  background-color: red;
-webkit-transition: all 2s; /* Safari */
   transition: all 2s;
}
.expand .child2{
  height: 800px;
  width: 30%;
}

Css转换不是反向工作

2 个答案: