Анимация для изменений CSS Flex в зависимости от высоты содержимого - PullRequest
Новая
       35

Анимация для изменений CSS Flex в зависимости от высоты содержимого

3 голосов
/ 26 апреля 2019

Я ищу способ анимировать изменение высоты контейнера 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>

1 Ответ

1 голос
/ 20 июня 2019

Есть несколько ограниченных способов сделать это.Следующая идея пришла мне в голову.Я надеюсь, что это работает для вас.Желаю удобств. 

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>

Вы можете изменить время анимации и задержки , как вам нравится.

...