如何实现hover时原div完全移除带过渡，新div延迟显示

要实现你要的效果，核心思路是用CSS过渡动画处理视觉隐藏，再通过JavaScript监听动画结束事件，完成display:none的移除操作，同时延迟显示.content。具体实现如下：

调整后的HTML结构 #

（和你的原结构一致，无需修改）

<div class="square">
   <div class="title">Title</div>
   <div class="content">Content</div>
</div>

CSS 样式设置 #

.square {
    width: 200px;
    height: 200px;
    background-color: lightblue;
    position: relative; /* 让内部元素定位更可控 */
    cursor: pointer;
}

.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.8s ease; /* 定义过渡动画 */
    margin: 0;
}

/* hover时触发title的淡出+位移动画 */
.square:hover .title {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(20px);
}

.content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* 初始隐藏 */
    margin: 0;
    /* 可选：给content添加显示动画 */
    transition: opacity 0.3s ease;
    opacity: 0;
}

JavaScript 逻辑处理 #

const square = document.querySelector('.square');
const title = square.querySelector('.title');
const content = square.querySelector('.content');

// 鼠标移入事件
square.addEventListener('mouseenter', () => {
    // 监听title的过渡结束事件（只触发一次）
    title.addEventListener('transitionend', () => {
        // 动画结束后完全移除title
        title.style.display = 'none';
        // 显示content
        content.style.display = 'block';
        // 触发重绘，让opacity过渡生效
        void content.offsetWidth;
        content.style.opacity = '1';
    }, { once: true });
});

// 鼠标移出事件，恢复初始状态
square.addEventListener('mouseleave', () => {
    // 恢复title的显示和样式
    title.style.display = 'block';
    void title.offsetWidth;
    title.style.opacity = '1';
    title.style.transform = 'translate(-50%, -50%)';
    // 隐藏content
    content.style.opacity = '0';
    content.addEventListener('transitionend', () => {
        content.style.display = 'none';
    }, { once: true });
});

关键说明 #

• 用opacity和transform实现过渡动画：这两个属性支持CSS过渡，能实现平滑的视觉消失效果
• 监听transitionend事件：确保只有在动画完全结束后，才设置display:none真正移除元素
• void element.offsetWidth：强制浏览器重绘元素，确保过渡动画能正常触发（避免浏览器优化跳过样式变化）
• 鼠标移出时的恢复逻辑：还原所有元素的状态，保证交互的完整性

内容的提问来源于stack exchange，提问作者Bob The Builder