javascript - 加载内容后动画 div 元素大小

Question

我有一个链接和一个空的 div 元素:

 <div class='content'>
    <a href='#' onclick="loadData('about')">About</a>
    <div id='data'>
    </div>
  </div>

当用户点击“关于”链接时，JavaScript 函数会触发并加载<div id='data'> 的innerHTML 的xml 数据。 ，结果:

    <div class='content'>
       <a href='#' onclick="loadData('about')">About</a>
       <div id='data'>
    <p>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. Duis aute irure dolor in reprehenderit in
 voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
 sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
 mollit anim id est laborum.</p>
       </div>
    </div>

你能告诉我如何设置 div 大小的动画吗？ 我的 CSS 看起来像这样:

.content {
    color: white;
    border: 6px double white;
    min-width: 400px;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 99;
    text-align: center;
    font-family: Georgia, sans-serif;
    font-weight: 300;
    background-color: #2f5afc;
    box-shadow: 0 1em 4em -1em black;
    text-shadow: black 0 0 4px;
}
p {
    height: 12em;
    overflow-y: scroll;
    color: white;
    font-size: 1.2em;
    text-align: justify;
    margin: 1em;
    line-height: 160%;
}

这里没有使用 JQuery 库。

Answer 1

如果您迎合现代浏览器，那么您可以使用 transition CSS 属性:

transition: all 0.25s linear 0s;

下面是一个片段，展示了它在实践中如何工作。

var strings = {
  'about' : "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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
};
var data = document.getElementById("data");
var open = false;
function test(area) {
  open = !open;
  if(open) {
    data.innerHTML = '<p>' + strings[area] + '</p>';
    data.style.height = '12em';
  } else {
    data.innerHTML = '<p></p>';
    data.style.height = '1em';
  }
}
document.getElementById("loadAbout").onclick = function(){
  test('about');
}

.content {
    color: white;
    border: 6px double white;
    min-width: 400px;
    padding: 1em;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 99;
    text-align: center;
    font-family: Georgia, sans-serif;
    font-weight: 300;
    background-color: #2f5afc;
    box-shadow: 0 1em 4em -1em black;
    text-shadow: black 0 0 4px;
    transition: all 0.25s linear 0s;
}
#data {
    height: 1em;
    overflow-y: scroll;
    color: white;
    transition: all 0.25s linear 0s;
    line-height:20px;
}

<div class='content'>
  <a href='#' id="loadAbout">About</a>
  <div id='data'>
  </div>
</div>