Javascript 加载内容后设置div元素大小的动画

我有一个链接和一个空div元素：

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

---

这里不使用JQuery库。

如果您要适应现代浏览器，则可以使用css属性：

transition: all 0.25s linear 0s;

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

var字符串={
“关于”："知识本身是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德，是一种美德如果你不自以为是，就必须为自己的行为负责。”
};
var data=document.getElementById（“数据”）；
var open=false；
功能测试（区域）{
打开=！打开；
如果（打开）{
data.innerHTML=''+字符串[区域]+'
'；
data.style.height='12em'；
}否则{
data.innerHTML='
'；
data.style.height='1em'；
}
}
document.getElementById（“loadAbout”）.onclick=function（）{
测试（“关于”）；
}

.content{
颜色：白色；
边框：6px双白色；
最小宽度：400px；
填充：1em；
位置：绝对位置；
最高：50%；
左：50%；
转换：translate3d（-50%，-50%，0）；
z指数：99；
文本对齐：居中；
字体系列：乔治亚，无衬线；
字体大小：300；
背景色：#2f5afc；
盒影：0 1em 4em-1em黑色；
文本阴影：黑色0 0 4px；
过渡：所有0.25s线性0；
}
#资料{
高度：1米；
溢出y：滚动；
颜色：白色；
过渡：所有0.25s线性0；
线高：20px；
}

.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%;
}

transition: all 0.25s linear 0s;