将内容注入 DIV 的 CSS 高度过渡答案

【问题标题】：CSS transition of height for injected content into a DIV将内容注入 DIV 的 CSS 高度过渡
【发布时间】：2014-10-08 08:18:27
【问题描述】：

我有以下模板：

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

以下风格：

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

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

见following plunkr

谢谢，

阿米特。

【问题讨论】：

我认为原因是您正在更改文本内容但重绘/重排不会触发

标签： html css angularjs css-transitions

【解决方案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/

【讨论】：

我喜欢这个解决方案，因为它通过设计提供了一个解决方案。我有种感觉，过渡只适用于声明的 CSS 属性，但您的解决方案为我提供了一种处理此问题的干净方法。非常感谢！

【解决方案2】：

嗯...您可以为此做一个技巧...我不知道它是否适合您的需求。

css 过渡效果应用于具有先前值的 css 属性，然后更改。尽管您确实在更改 div 的内容高度，但实际的 css 属性 height 并未显式更改。这就是你看不到动画的原因。

一种解决方法是找到 div 的内部高度，然后将其设置为元素，使其具有动画效果。我为此创建了一个函数，并添加了一个span 来控制 div 的内部大小。

只需在每次更改时调用该函数：

<div class='content'>
  <span id="height-control">
    {{ctrl.content}}
  </span>
</div>

JS函数：

  var spn = document.getElementById("height-control");
  var UpdateHeight = function () {
      var h = spn.offsetHeight;
      spn.parentNode.style.height = h + "px";
  };

http://plnkr.co/edit/p6QRAR5j4C8d0d0XRJRp?p=preview

【讨论】：