我使用JavaScript编写了一段代码，用户可以通过单击图标来显示所需的文本，并通过再次单击来隐藏文本。
文本显示时带有一个漂亮的动画，但是当文本被隐藏时，第二个动画不会播放。
有没有办法把文字和动画一起隐藏起来？

• • 总结如下：**

我希望将.animation_out类添加到.box_excerpt类中，以便在隐藏文本时运行第二个动画。
代码总数：

document.querySelectorAll('.box_icon').forEach(eye => {
    eye.addEventListener("click", function() {
    let excerpt = this.parentNode.querySelector(".box_excerpt");
    if (this.classList.contains("bi-play-circle-fill")) {
        this.classList = "bi bi-power box_icon";
        excerpt.style.display = "block";
        
      $(this).closest('.box_excerpt').toggleClass('animation_out');
        
    } else {
        this.classList = "bi bi-play-circle-fill box_icon";
        excerpt.style.display = "none"
        
        $(this).closest('.box_excerpt').toggleClass('animation_out');
        
      }
  });
});

.box_main {
        display: flex;
        justify-content: space-around;
    }

    .box_mini {
        position: relative;
        overflow: hidden;
        width: 400px;
        height: 500px;
        background: #c992e8;
        box-shadow: 0 0 4px #000;
        transition: all 0.5s ease;
    }

    .box_icon {
        font-size: 80px;
        color: #4b80c4;
        position: absolute;
        top: 5%;
        left: 38%;
        z-index: 3;
    }

    .box_excerpt {
        position: absolute;
        top: -25px;
        left: 0;
        right: 0;
        bottom: -40px;
        z-index: 2;
        font-size: 20px;
        line-height: 36px;
        padding: 117px 25px 10px;
        color: #01831b;
        text-align: justify;
        background: #9effcd;
        overflow: hidden;
        display: none;
        animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        -webkit-animation: scale-in-center 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @-webkit-keyframes scale-in-center {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
    }

    @keyframes scale-in-center {
        0% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }

        100% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }
    }

    .animation_out {
        animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
        -webkit-animation: scale-out-center 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }

    @-webkit-keyframes scale-out-center {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }
    }

    @keyframes scale-out-center {
        0% {
            -webkit-transform: scale(1);
            transform: scale(1);
            opacity: 1;
        }

        100% {
            -webkit-transform: scale(0);
            transform: scale(0);
            opacity: 1;
        }
    }

<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="box_main">

        <div class="box_mini">
            <i class="bi bi-play-circle-fill  box_icon"></i>
            <p class="box_excerpt">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus nam alias velit nihil dolorum
                corporis hic quibusdam exercitationem reiciendis nostrum. Dolor nam aliquam veritatis modi sequi
                mollitia quam quod, distinctio quidem, nisi soluta natus praesentium odio assumenda sunt tempora a culpa
                pariatur labore ea quaerat porro quae dolore! Modi rerum accusantium accusamus ipsam eos sequi at ullam,
                laboriosam nemo quis omnis odit dicta voluptatem officiis? Vitae optio quos nihil molestias dicta at
                praesentium error incidunt ratione qui. Accusantium beatae ex eaque saepe cupiditate hic tenetur. Totam
                earum consequuntur atque sunt tempore possimus saepe odit. Nam, voluptatum. Quo esse possimus ipsa.
            </p>
        </div>

        <div class="box_mini">
            <i class="bi bi-play-circle-fill  box_icon"></i>
            <p class="box_excerpt">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus nam alias velit nihil dolorum
                corporis hic quibusdam exercitationem reiciendis nostrum. Dolor nam aliquam veritatis modi sequi
                mollitia quam quod, distinctio quidem, nisi soluta natus praesentium odio assumenda sunt tempora a culpa
                pariatur labore ea quaerat porro quae dolore! Modi rerum accusantium accusamus ipsam eos sequi at ullam,
                laboriosam nemo quis omnis odit dicta voluptatem officiis? Vitae optio quos nihil molestias dicta at
                praesentium error incidunt ratione qui. Accusantium beatae ex eaque saepe cupiditate hic tenetur. Totam
                earum consequuntur atque sunt tempore possimus saepe odit. Nam, voluptatum. Quo esse possimus ipsa.
            </p>
        </div>

    </section>