计算元素的未来高度 [英] Calculate the future height of a element

问题描述

我的目的是在子div扩展时使用CSS3动画元素的高度过渡。

My intent is to animate using CSS3 the transition of height of a element when a child div get expanded.

<div id="container">
  <div id="content"> 
    <span>Small Conent</span>

    <div id="big">
      <p>
         This is way bigger content, will be visible after you have clicked the
         "Expand" button.
      </p>
      <p>It should animate up to the correct position.</p>
    </div>
  </div>

  <button id="expand">Expand</button>
</div>

我想出了这个黑客，使用 max-height 。但有几个问题：

I came up with this hack, using max-height. But there are a couple of problems:

• max-height必须有值


• 动画将根据 max-height 给定值启动和停止，因此如果插入一个疯狂的值，如 2000px 动画会有很大的延迟。

• The max-height must have a value
• The animation will start and stop according to the max-height given value, so if you insert a crazy value like 2000px the animation will have a great delay.

为了更好地说明问题，我创建了一个小提琴： http://jsfiddle.net/egDsE/3/

To better illustrate the problem, I created a Fiddle: http://jsfiddle.net/egDsE/3/

唯一的方法有一个精确的动画，是插入正确的值max-height。

The only way of having a precise animation, is to insert the correct value of max-height.

我的目的是计算使用JavaScript（和JavaScript只）父的高度一旦孩子扩大。但是，当然，我需要在实际转换发生之前计算它。

My intention is to calculate using JavaScript (and JavaScript only) what the height of the parent will be once the child is expanded. But of course, I will need to calculate it before the actual transition takes place.

这可能吗？只有纯JS。

Is this possible? Only pure JS please.

推荐答案

实际上，你不需要做所有的克隆和东西...给元素高度自动，检查大小和设置高度回到0.这将发生这么快浏览器没有机会重新绘制。

Actually, you don't need to do all of the that cloning and stuff...just give the element height auto, check the size and set the height back to 0. It'll happen so fast the browser has no chance to repaint.

现在，这个工作像一个魅力，但事情是，之后立即设置Javascript的高度将导致转换失败。我只是抛出一个100ms超时围绕它，然后它工作正常。文档

Now, this works like a charm, but the thing is that setting the height in Javascript immediately afterward will cause the transition to fail. I just throw a 100ms timeout around it and then it works fine.

Javascript ：

document.getElementById('expand').addEventListener('click', function () {
    var el = document.getElementById('big');
    if (!el.className) {
        el.className = 'expanded';
        document.getElementById('expand').innerHTML = 'Retract';
        var elH = getHeight(el);
        window.setTimeout(function() {
            el.style.height = elH+'px';
        }, 100);
    } else {
        el.className = '';
        el.style.height = '0';
        document.getElementById('expand').innerHTML = 'Expand';
    }
});

function getHeight(el) {
    el.style.height = 'auto';
    elHeight = el.offsetHeight;
    el.style.height = '0';
    return elHeight;
}

CSS： b

#container {
    border: 1px solid gray;
    padding: 20px;
}
#big {
    overflow: hidden;
    height: 0;
    transition: height 0.5s ease-in-out;
    -webkit-transition: height 0.5s ease-in-out;
    -moz-transition: height 0.5s ease-in-out;
    -o-transition: height 0.5s ease-in-out;
}

HTML： p>

HTML: no changes to your markup

<div id="container">
    <div id="content"> <span>Small Conent</span>

        <div id="big">
            <p>This is way bigger content, will be visible after you have clicked the "Expand" button.</p>
            <p>It should animate up to the correct position.</p>
        </div>
    </div>
    <button id="expand">Expand</button>
</div>

这篇关于计算元素的未来高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！