Javascript 使toggleClass像slideToggle一样设置动画？

我有一个显示前3个列表项的列表，其中有一个用于展开/折叠列表的链接。如果列表包含3项或更少，则不会显示展开/折叠链接

我遇到的问题是列表展开/折叠时的动画。我不想淡入，我想让列表滑入类似于幻灯片切换的工作方式。不幸的是，我不能让它与我的代码一起工作

有人有什么建议吗？任何帮助都将不胜感激

下面是我的代码，这是我的代码笔

HTML

<div id="feature-list">

  <ul id="product-features">
    <li>Feature 1</li>
    <li>Feature 2</li>
    <li>Feature 3</li>
    <li>Feature 4</li>  
    <li>Feature 5</li>
    <li>Feature 6</li>  
  </ul>

  <span id="feature-more">More Features</span>
  <span id="feature-less">Less Features</span>

</div>

JS

#feature-list li:nth-child(n+4) {
    display: none;
}

#feature-list.open li:nth-child(n+4) {
    display: list-item;
}

#feature-more,
#feature-less {
    color: blue;
    display: none;
    cursor: pointer;
}

$( document ).ready(function() {
    $('#feature-list #feature-more').on('click', function(e) {
        e.preventDefault();
        $(this).closest('#feature-list').toggleClass('open');
        $('#feature-more').hide();
        $('#feature-less').show();
    });
    $('#feature-list #feature-less').on('click', function(e) {
        e.preventDefault();
        $(this).closest('#feature-list').toggleClass('open');
        $('#feature-less').hide();
        $('#feature-more').show();
    });
    if ($('#feature-list > ul > li').length > 3) {
        $('#feature-more').show();
    }  
});

---

在这里，这似乎起到了作用

$( document ).ready(function() {
$('#feature-list #feature-more').on('click', function(e) {
    e.preventDefault();
    $('ul li:gt(2)').slideToggle();
    $('#feature-more').hide();
    $('#feature-less').show();
});
$('#feature-list #feature-less').on('click', function(e) {
    e.preventDefault();
    $('ul li:gt(2)').slideToggle();
    $('#feature-less').hide();
    $('#feature-more').show();
});
if ($('#feature-list > ul > li').length > 3) {
    $('#feature-more').show();
}  
});