Question

目标：对内容调整大小的div。

鉴于：

未指定Div高度和宽度。
Div大小取决于内容大小。
当内容大小发生变化时，div大小也会发生变化（没有动画，大小调整为0.5FPS ）。

问题：当动态改变大小时，如何根据内容对div应用动画/效果？

注意：一个很好的例子就是@ https://www.example.com（卡片在下次成功时重新调整大小）

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());
}

Answer 2

应用最大高度和最大宽度以及内联块的显示属性。

div {
 display: inline-block;
 background:red;
 transition: max-height 1s, max-width 1s; 
 max-height:0;
 max-width:0;
}
div:hover {
 max-height:200px;
 max-width:400px;
}

<div>yada yada yada</div>

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

2 个答案: