如何实现Google Translate元素页面加载4秒后从右侧滑入，选择后滑出？

核心思路 #

• 用容器包裹翻译元素和竖线，统一控制滑动动画
• 初始状态将容器移出视口右侧，通过CSS过渡实现平滑滑动
• 页面加载完成后延迟4秒触发滑入动画
• 监听翻译下拉框的选择事件，触发滑出动画

修改后的HTML结构 #

给原有的两个元素添加统一容器，方便整体控制滑动：

<div class="translate-container">
  <div id="google_translate_element"></div>
  <div class="vl"></div>
</div>

调整后的CSS样式 #

保留原有的自定义样式，新增滑动容器的过渡逻辑，移除原有的绝对定位margin避免冲突：

/* 滑动容器核心样式 */
.translate-container {
  position: fixed;
  right: -150px; /* 初始状态完全移出视口右侧 */
  top: 67px;
  transition: right 0.3s ease-in-out; /* 平滑滑动过渡动画 */
  z-index: 9999; /* 确保在页面最上层显示 */
}

/* Google翻译下拉框自定义样式 */
#google_translate_element select{
  background: rgba(246,237,253,0.92) !important;
  border: none !important;
  color: rgba(54,58,173) !important;
  width: 115px !important;
  border-radius: 5px !important;
  padding: 5px 5px !important;
  font-size: 11.8px !important;
  position: relative !important; 
  margin: 17px 0 0 0 !important; /* 调整内部间距，保持原垂直位置 */
}

/* 竖线自定义样式 */
.vl {
  position: absolute !important;
  border-left: 3.7px solid green !important;
  border-radius: 2px !important;
  height: 30px !important;
  top: 0 !important;
  left: 120px !important; /* 相对于容器定位，保持原横向位置 */
}

/* 隐藏Google翻译自带冗余元素 */
.goog-logo-link,.goog-te-gadget span,div#goog-gt-{
  display:none!important;
}
.goog-te-gadget{
  color:transparent!important;
  font-size:0;
}
/* 隐藏翻译顶部横幅和提示框 */
.goog-te-banner-frame{
  display:none !important;
}
#goog-gt-tt, .goog-te-balloon-frame{
  display: none !important;
}
.goog-text-highlight { 
  background: none !important; 
  box-shadow: none !important;
}

交互逻辑JS代码 #

先加载Google翻译API，再实现延迟滑入和选择后滑出的逻辑：

// 初始化Google翻译元素
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
  
  // 等待动态生成的下拉框加载完成后绑定事件
  setTimeout(() => {
    const translateSelect = document.querySelector('#google_translate_element select');
    if (translateSelect) {
      // 选择语言后触发滑出
      translateSelect.addEventListener('change', () => {
        document.querySelector('.translate-container').style.right = '-150px';
      });
    }
  }, 500);
}

// 页面加载完成后延迟4秒触发滑入
window.addEventListener('load', () => {
  setTimeout(() => {
    document.querySelector('.translate-container').style.right = '20px'; // 滑入到右侧留20px间距
  }, 4000);
});

需在HTML底部引入Google翻译API脚本：

<script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

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