CSS Flex 的动画根据内容高度变化答案

【问题标题】：Animation for CSS Flex changes based on content heightCSS Flex 的动画根据内容高度变化
【发布时间】：2019-06-20 06:32:19
【问题描述】：

我正在寻找一种在同级容器的内容更新时为 Flex 容器高度变化设置动画的方法。

下面是一个非常简单的弹性容器示例。请尝试单击按钮 toggleText 以查看它的实际效果。有没有办法在兄弟更改后为红色容器的高度设置动画？我尝试为 flex 进行转换，但在我的场景中不起作用。

谢谢！

var i = 0;

var toggleText = function() {
  document.querySelector('p').innerHTML = text[(i++) % 2];
}


var text = [
  "Some short text here.",
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."]

.container {
  height: 140px;
  width: 400px;
  border: 1px solid black;
  padding: 10px;
  display: flex;
  flex-flow: column;
}

.image {
  background-color: bisque;
  flex: 1 1 auto;
  display: flex;
  border: 1px solid red;
}

<button onclick="toggleText()">toggleText</button>

<div class="container">
  <p></p>
  <div class="image"></div>
</div>

【问题讨论】：

标签： css flexbox css-animations

【解决方案1】：

有几种有限的方法可以做到这一点。我想到了以下想法。我希望这个对你有用。我希望方便。

var i = 0,
    hidden = document.querySelector('#hidden p'),
    visible = document.querySelector('#visible p'),
    hiddenHeight = 0,
    content;

var toggleText = function() {
  content = text[(i++) % 2];
  hidden.innerHTML = content;
  hiddenHeight = hidden.offsetHeight;
  hidden.innerHTML = "";
  visible.style.height = hiddenHeight+"px";
  visible.innerHTML = content;
}


var text = [
  "Some short text here.",
  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."]

.container {
  height: 140px;
  width: 400px;
  border: 1px solid black;
  padding: 10px;
  display: flex;
  flex-flow: column;
  transition: all 500ms;
}

.container p{
  transition: all 500ms;
}

.image {
  background-color: bisque;
  flex: 1 1 auto;
  display: flex;
  border: 1px solid red;
}

#hidden {
  height:0!important;
  overflow:hidden!important;
}
#hidden p{
  visibility: hidden;
  opacity: 0;
  transition: all 500ms;
}

<button onclick="toggleText()">toggleText</button>

<div class="container">
  <div id="hidden">
    <p></p>
  </div>
  <div id="visible">
    <p style="height:0"></p>
  </div>
  <div class="image"></div>
</div>

您可以随意更改animation time and delays。

【讨论】：