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时，没有转换，只是一个简单的旧大小调整。是否有任何关于正确过渡的帮助？

请参阅following plunkr

谢谢，

阿米特。

Answer 1

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

一个选项可能是嵌套div，在外部设置overflow: hidden，然后获取内部的计算高度，并将其设置在外部，以获得转换。< / p>

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/

Answer 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

注入内容的高度CSS转换为DIV

2 个答案: