Question

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

Here是我的工作示例（很抱歉没有在此处显示代码，但只是链接工作和可编辑的示例更容易）。单击按钮创建一个新表，然后单击行以使它们消失。

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

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

PS：抱歉，如果我愚蠢，我是网络开发的新手。

PS2：请不要jQuery。

Answer 1

您必须像这样更新/更改lineheight

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);
}

调整大小时无法解决溢出问题

1 个答案: