CSS 高度在 Javascript 中不过渡

Question

在这里帮助我解决为什么我的CSS过渡不起作用。

我正在尝试通过 Javascript 函数将高度更改为

元素，无论是增大还是缩小它。我的标记是这样的：

<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>

附加到

、

和的 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类似的问题，到处都是，我无法得到高度逐渐改变。

谢谢大家。

> 不能在auto值之间转换，只能在定义的值之间转换。

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

所以相反

collapsedItem.style.height = 'auto';

你会做的

collapsedItem.style.height = collapsedItem.offsetHeight+'px';