时间戳

首页 > 解决方案 > CSS Flex 的动画根据内容高度变化

css - CSS Flex 的动画根据内容高度变化

问题描述

我正在寻找一种在更新同级容器的内容时​​为 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>

标签： cssflexboxcss-animations

解决方案

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

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>

您可以根据需要更改动画时间和延迟。

推荐阅读