将内容注入 DIV 时的 CSS 高度转换

Question

我有以下模板：

<div class='content'>
    {{content}}
</div>

以及以下风格：

.content {
  margin-top: 30px;
  background-color: skyblue;
  width: 300px;
  transition: all linear 0.5s;
}

请注意，它{{content}}会增大或缩小（技术上是扩展卡片以显示更多信息或隐藏它）。我已经设置了 css，并且在手动设置不同的元素transition时它确实有效。height然而，当注入更多内容时，content不会进行任何转换，只是简单地调整大小。对正确过渡有什么帮助吗？

请参阅以下 plunkr

谢谢，

阿米特。

Answer 1

我认为这是很正常的，过渡仅适用于 CSS 的更改，不适用于计算的更改。

一种选择可能是在外部高度上div设置一个嵌套overflow: hidden, 然后获取内部高度的计算高度并将其设置在外部高度上以获得过渡。

CSS：

#outer {
    margin-top: 30px;
    background-color: skyblue;
    width: 300px;
    transition: all linear 0.5s;
    overflow: hidden;
}

HTML：

<button id="more" onclick="increase();">More</button>
<button id="more" onclick="decrease();">Less</button>
<div id="outer">
    <div id="inner">
        lorem ipsum
    </div>
</div>

JS：

function increase()
{
    var o = document.getElementById('inner');
    var t = o.innerHTML;
    for (var i=0 ; i<20;i++)
        t += " lorem ipsum";
    o.innerHTML = t;
    adjustHeight();
}

function decrease()
{
    var o = document.getElementById('inner');
    o.innerHTML = "lorem ipsum";
    adjustHeight();
}

function adjustHeight()
{
    var i = document.getElementById('inner');
    var o = document.getElementById('outer');

    o.style.height = window.getComputedStyle(i).height;
}

工作小提琴：http://jsfiddle.net/Lnts7w1f/