如何实现JavaScript点击隐藏文本时触发animation_out动画？

问题核心原因 #

当前代码存在两个关键问题导致隐藏动画失效：

1. 直接设置excerpt.style.display = "none"会立即隐藏元素，退出动画没有执行机会
2. 选择器错误：$(this).closest('.box_excerpt')无法定位目标元素，因为.box_excerpt是点击图标的兄弟节点，而非祖先节点

解决方案步骤 #

1. 替换display控制逻辑：隐藏元素前先添加退出动画，监听动画结束事件，动画完成后再设置display:none
2. 修正元素选择器：通过this.parentNode.querySelector(".box_excerpt")或jQuery的siblings()正确获取目标文本元素
3. 拆分动画类：将进入、退出动画拆分为独立类，避免样式冲突

修正后的完整代码 #

JavaScript代码

document.querySelectorAll('.box_icon').forEach(icon => {
    icon.addEventListener("click", function() {
        const excerpt = this.parentNode.querySelector(".box_excerpt");
        const $excerpt = $(excerpt);
        
        if (this.classList.contains("bi-play-circle-fill")) {
            // 切换图标样式
            this.classList = "bi bi-power box_icon";
            // 显示元素并播放进入动画
            excerpt.style.display = "block";
            $excerpt.removeClass('animation_out').addClass('animation_in');
        } else {
            // 切换图标样式
            this.classList = "bi bi-play-circle-fill box_icon";
            // 添加退出动画，动画结束后隐藏元素
            $excerpt.addClass('animation_out').removeClass('animation_in');
            
            // 监听动画结束事件（兼容webkit内核）
            const handleEnd = () => {
                excerpt.style.display = "none";
                $excerpt.off('animationend webkitAnimationEnd', handleEnd);
            };
            $excerpt.on('animationend webkitAnimationEnd', handleEnd);
        }
    });
});

CSS代码

.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;
    cursor: pointer; /* 添加交互提示 */
}

.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_in {
    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;
    }
}

HTML代码（无需修改）

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

内容的提问来源于stack exchange，提问作者Developer