Анимированный шаблон с динамическим контентом - PullRequest
Новая
       9

Анимированный шаблон с динамическим контентом

0 голосов
/ 04 мая 2018

Я хочу создать шаблон, который можно использовать повторно. Шаблон будет выглядеть примерно так (хотя я на самом деле использую реагирующие компоненты, здесь я свел его к проблеме css): 

var content = [
                "<div class='banner-content-big'></div>",
                "<div class='banner-content-small'></div>"
              ];
              
var contentIndex = 0;

function toggleBanner() {
  contentIndex = ++contentIndex > 1 ? 0 : contentIndex;
  
  var banner = document.getElementsByClassName("template-banner")[0];
  
  banner.innerHTML = content[contentIndex];
}
.template-container {
  height: 300px;
  width: 400px;
  display: flex;
  flex-direction: column;
}
  
.template-banner {
  background-color: red;
  flex: 0 0;
}

.template-main {
  background-color: green;
  overflow: hidden;
  flex: 1 0;
 }

.banner-content-small {
  background-color: yellow;
  height: 50px;
}

.banner-content-big {
  background-color: yellow;
  height: 100px;
}
 
.main-content {
  background-color: blue;
  height: 350px;
}
<div class="template-container" onclick="toggleBanner()">
  <div class="template-banner">
    <div class="banner-content-big"></div>
  </div>
  <div class="template-main">
    <div class="main-content"></div>
  </div>
</div>
  • шаблон-баннер растёт / сжимается, чтобы идеально подходить под его содержание
  • но я не могу понять , как добавить переход, который будет хорошо анимировать изменение высоты шаблона-баннера .
  • Важным ограничением является то, что переход должен быть определен в компоненте шаблона , а не в компонентах (разделах здесь), которые вставляются в шаблон-баннер.

Такое ощущение, что это должен быть переход на flexbox, но я не могу найти способ сделать это.

...