javascript - 为什么我的过渡动画在关闭 div 时出现故障？

Question

我有一张卡片，当您单击右下角的箭头时，它会展开以显示更多内容。我注意到，如果我点击箭头关闭额外的内容，在它关闭之前会有一个轻微的障碍。

看起来是先把padding去掉，然后把整个div合上。有没有什么办法可以让这个动画流畅而不会有断断续续的动画？

这是 JSFiddle

用于切换类的 JavaScript。

$('.remove-text').click(function() {
        var el = event.target.parentElement;
        console.log(el);
        console.log(event.target);
        $(el).closest('.card').toggleClass('collapsed');
        if (  $( event.target).css( "transform" ) == 'none' ){
            $(event.target).css("transform","rotate(180deg)");
        } else {
            $(event.target).css("transform","" );
        }
    })

Answer 1

填充是导致问题的原因。您可以从该元素中删除填充并为其子元素之一添加边距以具有相同的间距。

.content {
    overflow: hidden;
    display: flex;
    align-items: center;
    /* padding-top: 10px; */
    /* padding-bottom: 10px; */
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    /* padding-top: 4px; */
    /* padding-bottom: 4px; */
    max-height: 500px;
    transition: max-height 0.5s;
}
.more-horiz-col{
  margin: 20px 0px;
}