通过平滑的动画扩展单击部分

Question

我无法获得平滑的下拉动画来处理我的部分。

当我单击“更多项目”按钮（我将其作为不带href的锚标记）时，我正在尝试使平滑的下拉动画继续播放。我该怎么做？

我已经尝试过此Question，但我也无法使其正常运行。我认为可能是因为我的某些班级正在干扰它吗？这是我的代码。

我有2个相同的部分，但第二个部分用javascript添加了一个类，因此页面加载时它不会显示。我尝试用visibility: hidden来做，然后用动画来显示它，但是那也不起作用。

window.addEventListener('load', () => {
    let moreButton = document.querySelector('#actual-more-button');
    let moreBoxes = document.querySelector('.more-boxes');

    moreBoxes.classList.add("remove-boxes");

    moreButton.addEventListener("click", function () {
        moreBoxes.classList.toggle('remove-boxes');
        document.querySelector('.smalldesc').classList.toggle('expand');
        if (moreButton.innerHTML === "Less Projects") {
            moreButton.innerHTML = "More Projects";
        } else {
            moreButton.innerHTML = "Less Projects";
        }
    });
});

.remove-boxes {
    display: none;
    visibility: hidden;
}

.smalldesc {
    max-height: 52px;
    overflow: hidden;
    transition: all 2s ease;
}

.smalldesc.expand {
    max-height: 100%;
}

<section id="boxes">
    <div class="box-container">
        <div class="box" data-aos="fade-right" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
            <div>
                <img src="assets/img/colorgame-screenshot.png" alt="">
            </div>
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="assets/Color Game/index.html">Color Game</a></h1>
            <p>Game that gives a random rgb value to the user and the user needs to guess the correct color.</p>
        </div>
        <div class="box" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
            <div>
                <img src="assets/img/rps-screenshot.png" alt="">
            </div>
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="assets/Rock Paper Scissor Game/index.html">Rock Paper Scissor Game</a></h1>
            <p>Good old rock, paper, scissors game versus a computer.</p>
        </div>
        <div class="box" data-aos="fade-left" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
            <div>
                <img src="assets/img/to-do-list-screenshot.png" alt="">
            </div>
            <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
            <h1><a href="assets/ToDoList Project/index.html">To-do List</a></h1>
            <p>Simple todo list app. Let's you add, check off, and remove tasks.</p>
        </div>
    </div>
</section>

<div class="smalldesc">
    <section id="boxes" class="more-boxes">
        <div class="box-container">
            <div class="box" data-aos="fade-right" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
                <div>
                    <img src="assets/img/colorgame-screenshot.png" alt="">
                </div>
                <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
                <h1><a href="assets/Music Tap Project/sound-game.html">Music Tap</a></h1>
                <p>Press some keys. Make some music.</p>
            </div>
            <div class="box" data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
                <div>
                    <img src="assets/img/rps-screenshot.png" alt="">
                </div>
                <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
                <h1><a href="assets/Rock Paper Scissor Game/index.html">Rock Paper Scissor Game</a></h1>
                <p>Good old rock, paper, scissors game versus a computer.</p>
            </div>
            <div class="box" data-aos="fade-left" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000">
                <div>
                    <img src="assets/img/to-do-list-screenshot.png" alt="">
                </div>
                <i class="fab fa-html5 fa-3x"></i><i class="fab fa-css3-alt fa-3x"></i><i class="fab fa-js fa-3x"></i>
                <h1><a href="assets/ToDoList Project/index.html">To-do List</a></h1>
                <p>Simple todo list app. Let's you add, check off, and remove tasks.</p>
            </div>
        </div>
    </section>
</div>