0

帮我看看为什么我的 CSS 转换不起作用。

我正在尝试通过 Javascript 函数对 <div> 元素的高度变化进行动画处理，无论是增长它还是缩小它。我的标记是这样的：

<div class="post series expandcollapse" id="id1" style="height: 32px;">
    <p class="expandcollapse_link" id="expandcollapselink1" name="expandcollapselink1" onclick="toggleCollapsedItem('1');"><img id="expandcollapseimage1" name="expandcollapseimage1" class="expandcollapse" src="images/icons/expandcollapse.png" alt=""></p>
    <h2 onclick="toggleCollapsedItem('1');">Some random heading here</h2>
    <p>Some random text here</p>
</div>

附加到 <div>、<h2> 和 <img> 的 CSS 是：

div.expandcollapse { border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; height: 32px; transition: all 5s ease-in; overflow: hidden; }
div.expandcollapse h2 { cursor: pointer; }
div.expandcollapse img.expandcollapse { transition: all .5s; cursor: pointer; }
div.expandcollapse p.expandcollapse_link { float: right; margin-top: -2px; }

当用户点击它时，它会启动这个 Javascript 函数：

function toggleCollapsedItem(clickedItem, forceOpen = false) {
    var collapsedItem = document.getElementById('id' + clickedItem);
    var collapsedLink = document.getElementById('expandcollapselink' + clickedItem);
    var collapsedImage = document.getElementById('expandcollapseimage' + clickedItem);
    if(typeof collapsedItem.originalHeight === 'undefined') {
        Object.defineProperty(collapsedItem, 'originalHeight', { value: collapsedItem.style.height, writable: false });
    }
    if((collapsedItem.style.height === collapsedItem.originalHeight) || (forceOpen === true)) {
        collapsedItem.style.height = 'auto';
        collapsedImage.style.transform = 'rotate(45deg)';
    } else {
        collapsedItem.style.height = collapsedItem.originalHeight;
        collapsedImage.style.transform = '';
    }
}

图像完全按照应有的方式逐渐（根据过渡）旋转，但高度不关心过渡。谁能在这里发现我的问题？我一直在谷歌，Stackoverflow 上搜索类似的问题，到处都是，我无法让高度逐渐改变。

感谢大家。

4

1 回答 1

1

您不能转换到值或从auto值转换，只能在定义的值之间转换。

我假设元素可以具有不同的高度。如果您已经在使用 Javascript，则可以从32px元素的offsetHeight.

所以与其

collapsedItem.style.height = 'auto';

你会的

collapsedItem.style.height = collapsedItem.offsetHeight+'px';
于 2021-03-23T02:13:19.730 回答