javascript - 我可以在 div 调整大小上放置动画/效果吗？

Question

目标:在内容调整大小时动画 div。

给定:

1. 未指定 Div 高度和宽度。
2. Div 大小取决于内容大小。
3. 当内容大小改变时，div 大小也会改变(没有动画，在 0.5FPS 内调整)。

问题:当 div 的大小根据内容动态变化时，如何在 div 上应用动画/效果？

注意:一个很好的例子是@ gmail (卡片在下次成功时调整大小)

Answer 1

有一个方法可以做到这一点。您需要为此使用一个隐藏元素。您必须在两个元素中设置内容。尝试以下操作

HTML:

<span id="hiddenElement"></span>

<div id="displayElement"></div>

CSS:

#hiddenElement
{
    max-width: 200px;
    opacity: 0;
    /* use different properties to completely hide. but do not give width:0 */
}

#displayElement
{
    width: auto;
    height: auto;
    max-width: 200px;
    -webkit-transition: width 0.5s, height 0.5s; /* Safari */
    transition: width 0.5s, height 0.5s;
    border: 1px solid black;
    overflow: hidden;
}

JS方法:

function setContent(content)
{
     $("#hiddenElement").text(content);
     $("#displayElement").text(content);
     $("#displayElement").width($("#hiddenElement").width());
     $("#displayElement").height($("#hiddenElement").height());
}