Question

首先：我知道有很多与此类似的问题。我看了很多，并尝试了很多东西。

这是我要尝试的操作：使用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>

我认为这是所有活动的部分。我想这更多是我忽略了某件事的问题，但对于我的一生，我看不到它。

Answer 1

使用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>

内容更改时对div大小的变化进行动画处理

1 个答案: