Анимация изменения размера div при изменении содержимого - PullRequest
Новая
       7

Анимация изменения размера div при изменении содержимого

0 голосов
/ 18 ноября 2018

Во-первых: я знаю, что есть много разных вопросов, похожих на этот. Я смотрел на многие из них и много чего пробовал.

Вот что я пытаюсь сделать: используя JavaScript, я изменяю содержимое div на моей странице. Когда он меняется, размер меняется мгновенно. Я бы хотел, чтобы изменения были анимированными.

Похоже, что общее согласие заключается в том, что «авто» нельзя анимировать, поэтому вот что у меня есть: 

    function rightClick() {
	fgContent = document.querySelector('#fgContent');
	rtButton = document.querySelector('#rightButton');
	fgDiv = document.querySelector('#fgDiv');
	spacing = fgDiv.clientHeight - fgContent.clientHeight;
    if (rtButton.textContent === "What's a Grimmage?") {
        nextButton = "How's it work?";
        nextDiv = document.querySelector('#whatIsIt');
    }
    // I removed a handful of similar if statements.
    fgDiv.maxHeight = fgDiv.clientHeight;
    fgDiv.minHeight = fgDiv.clientHeight;
    fgContent.innerHTML = nextDiv.innerHTML;
    fgDiv.maxHeight = nextDiv.clientHeight + spacing;
    console.log('Max height')
    fgContent.minHeight = 0;
    rtButton.textContent = nextButton;
};
    .foreground {
    position: relative;
    z-index: 1;
    width: 33%;
    margin-top: 10%;
    margin-left: 10%;
    padding: 10px;
    color: black;
    background: whitesmoke;
    height: auto;
    opacity: .85;
    border-radius: 10px;
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
    }
    <div class="foreground" id="fgDiv">
    <div id="fgContent">
	<h1 id="foregroundTitle" class="headline">Make a Grimmage!</h1>
	<p class="text">Balh.</p>
	</div>
	<p><div class="btn-group" style="position: relative; margin: auto;"><a href="#" class="btn btn-primary">Login / Sign up</a><button id="rightButton" onclick="rightClick()" class="btn btn-info">What's a Grimmage?</button></div> 
    </p>
    </div>
    <div class="hidden" id="whatIsIt">
	<h1 class="headline">What is a Grimmage?</h1>
	<p class="text">More blah.</p>
	<p class="text">So much blah.</p>
    </div>

Я думаю, что это все движущиеся части. Я предполагаю, что это скорее вопрос о том, что я что-то упустил, но я не вижу этого в жизни.

1 Ответ

0 голосов
/ 18 ноября 2018

Используйте CSS transitions, (как вы сделали) и JS .scrollHeight.

Более подробное объяснение:

  • Установите размеры при загрузке страницы, потому что переходы могут 'оживить что-то от auto до ##px.
  • Установите размеры scrollHeight, используя элемент, которым вы собираетесь его заменить.(Примечание: для точных размеров элемент должен иметь переполнение: скрытый` для учета полей и нет заполнения.)

Наконец, чтобы скрыть элементы, вы можете поместить их внутрьоберните и спрячьте его с родителем. 

var fgDiv = document.querySelector('#fgDiv');
var fgContent = document.querySelector('#fgContent');
var rtButton = document.querySelector('#rightButton');

updateDimesions(fgContent, fgContent); // First update of the dimensions

function rightClick() {
  if (rtButton.textContent === "What's a Grimmage?") {
    nextButton = "How's it work?";
    nextDiv = document.querySelector('#whatIsIt');
  }
  // I removed a handful of similar if statements.
  fgContent.innerHTML = nextDiv.innerHTML;
  rtButton.textContent = nextButton;

  updateDimesions(fgContent, nextDiv); // Second update of the dimensions
};

function updateDimesions(el, replace) {
  el.style.width = replace.scrollWidth + 'px';
  el.style.height = replace.scrollHeight + 'px';
}
.foreground {
  width: 33%;
  background: whitesmoke;
}

.foreground-inner {
  overflow: hidden;
  /* Hide the content initially */
  -moz-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.hidden {
  height: 0;
  overflow: hidden;
}

.hidden > div {
  overflow: hidden;
  /* This accounts for margin in ".scrollHeight" */
  padding: 0;
  /* Padding messes with .scrollHeight */
}
<div class="foreground" id="fgDiv">
  <div id="fgContent" class="foreground-inner">
    <h1 id="foregroundTitle" class="headline">Make a Grimmage!</h1>
    <p class="text">Balh.</p>
    <p class="text">More blah.</p>
    <p class="text">So much blah.</p>
    <p class="text">More blah.</p>
    <p class="text">So much blah.</p>
    <p class="text">More blah.</p>
    <p class="text">So much blah.</p>
  </div>
  <p>
    <div class="btn-group" style="position: relative; margin: auto;"><a href="#" class="btn btn-primary">Login / Sign up</a><button id="rightButton" onclick="rightClick()" class="btn btn-info">What's a Grimmage?</button></div>
  </p>
  <div class="hidden">
    <div id="whatIsIt">
      <h1 class="headline">What is a Grimmage?</h1>
      <p class="text">More blah.</p>
      <p class="text">So much blah.</p>
    </div>
  </div>
</div>

</div>
...