javascript - 调整 大小时无法让溢出工作

Question

所以基本上我正在处理一个可以用漂亮的动画处理其行的表格。问题是我无法将行缩小到超出其大小小于其内容大小的位置。一旦收缩动画达到文本的高度(我正在垂直收缩)，它就会停止。当然，我也在 Google 和 Stack Overflow 上寻找答案，并找到了很多，但我尝试了所有这些都没有成功。我尝试在 CSS 中编写 overflow: hidden;，以及所有其他声称可以解决此问题的内容。

Here是我的工作示例(很抱歉没有在这里显示代码，但是链接一个工作和可编辑的示例会更容易)。单击按钮创建一个新表，然后单击行以使其消失。

我知道这个问题以前在其他地方已经回答过，但这些解决方案似乎对我不起作用。

有什么想法吗？我希望被点击的行在被删除之前完全缩小。

PS.:对不起，如果我是愚蠢的，我是网络开发的新手。

PS2.:请不要使用 jQuery。

Answer 1

你必须像这样更新/改变行高

https://jsfiddle.net/9hznp00s/12/

function deleteRow(id) {
    if (typeof (id) === 'undefined') return;

    var element = document.getElementById(id);

    // Set the row's height and opacity to 0 (the changes are animated by the CSS)

    // I commented this out so it's easier to see the collapse effect
    //element.style.opacity = 0;

    element.style.height = '0px';
    element.style.maxHeight = '0px';
    element.style.lineHeight = '0px';
    element.style.opacity=0.0;

    // After the animation is done, remove the row form the HTML
    setTimeout(function () {
        element.innerHTML = '';
        element.parentNode.removeChild(element);
    }, 500);
}

或尝试其中之一
https://jsfiddle.net/9hznp00s/8/

function deleteRow(id) {
    if (typeof (id) === 'undefined') return;

    var element = document.getElementById(id);

    // Set the row's height and opacity to 0 (the changes are animated by the CSS)

    // I commented this out so it's easier to see the collapse effect
    //element.style.opacity = 0;

    element.style.height = '0px';
    element.style.maxHeight = '0px';
    element.style.fontSize = '0px';

    // After the animation is done, remove the row form the HTML
    setTimeout(function () {
        element.innerHTML = '';
        element.parentNode.removeChild(element);
    }, 500);
}

https://jsfiddle.net/9hznp00s/10/

function deleteRow(id) {
    if (typeof (id) === 'undefined') return;

    var element = document.getElementById(id);

    // Set the row's height and opacity to 0 (the changes are animated by the CSS)

    // I commented this out so it's easier to see the collapse effect
    //element.style.opacity = 0;

    element.style.height = '0px';
    element.style.maxHeight = '0px';
    element.style.fontSize = '0px';
    element.style.opacity=0.0;

    // After the animation is done, remove the row form the HTML
    setTimeout(function () {
        element.innerHTML = '';
        element.parentNode.removeChild(element);
    }, 500);
}