如何实现页面加载3秒后元素自动滑入，用户操作后自动滑出？

问题分析 #

你的需求是让翻译面板初始隐藏，3秒后自动从右侧滑入，用户选择语言后自动滑出。现有CSS只实现了滑入动画，但缺少初始隐藏逻辑和滑出触发机制，需要结合JavaScript完成无按钮的自动交互。

第一步：调整CSS样式 #

修改原有CSS，添加初始隐藏状态、滑出动画，并通过类来控制动画触发（方便JS动态操作）：

/* 初始状态：完全隐藏在右侧 */
#mmj {
    position: relative !important;
    transform: translateX(100%);
    visibility: hidden;
}

/* 滑入动画：从右侧进入并保持显示 */
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
    visibility: visible;
  }
  100% {
    transform: translateX(0);
    visibility: visible;
  }
}

/* 滑出动画：回到右侧并隐藏 */
@keyframes slideOutToRight {
  0% {
    transform: translateX(0);
    visibility: visible;
  }
  100% {
    transform: translateX(100%);
    visibility: hidden;
  }
}

/* 滑入状态类：触发滑入动画并保留最终状态 */
.slide-in {
    animation: 2s ease-out 0s 1 slideInFromRight forwards !important;
}

/* 滑出状态类：触发滑出动画并保留最终状态 */
.slide-out {
    animation: 2s ease-in 0s 1 slideOutToRight forwards !important;
}

关键说明：

• 初始状态用transform: translateX(100%)和visibility: hidden让元素完全隐藏在视口外
• 动画添加forwards属性，确保动画结束后保持最终状态

第二步：JavaScript交互逻辑 #

通过JS实现3秒自动滑入，以及监听翻译选择事件触发滑出：

document.addEventListener('DOMContentLoaded', function() {
    const panel = document.getElementById('mmj');

    // 页面加载完成后，延迟3秒触发滑入
    setTimeout(() => {
        panel.classList.add('slide-in');
    }, 3000);

    // 监听谷歌翻译的语言选择操作（事件委托适配动态生成的元素）
    document.addEventListener('change', function(e) {
        // 判断触发事件的是否是谷歌翻译的下拉选择框
        if (e.target.matches('.goog-te-combo')) {
            // 移除滑入类，添加滑出类触发动画
            panel.classList.remove('slide-in');
            panel.classList.add('slide-out');
            
            // 动画结束后清理类（避免重复触发异常）
            panel.addEventListener('animationend', function() {
                panel.classList.remove('slide-out');
            }, { once: true });
        }
    });
});

关键说明：

• 用DOMContentLoaded确保DOM加载完成后再操作元素
• 事件委托监听change事件，适配谷歌翻译动态生成的下拉框
• animationend事件监听动画结束，清理状态类避免冲突

内容的提问来源于stack exchange，提问作者Johnny blee Rowland