弹出snackbar时，将其移动到snackbar下，当它在javascript中消失时，将其移回。

<div id="snackbar-container"></div>
<button onclick="showSnackbar()">显示Snackbar</button>

#snackbar-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #333;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-out;
}

#snackbar-container.hidden {
  transform: translateY(100%);
}

function showSnackbar() {
  var container = document.getElementById("snackbar-container");
  
  // 创建snackbar元素
  var snackbar = document.createElement("div");
  snackbar.innerHTML = "这是一个Snackbar";
  snackbar.className = "snackbar";
  
  // 将snackbar添加到容器元素中
  container.appendChild(snackbar);
  
  // 触发重绘，以便应用CSS过渡效果
  container.offsetHeight;
  
  // 移动snackbar到屏幕上方
  snackbar.style.transform = "translateY(-100%)";
  
  // 设置定时器，在一定时间后移回snackbar到底部
  setTimeout(function() {
    snackbar.style.transform = "translateY(0)";
    snackbar.addEventListener("transitionend", function() {
      container.removeChild(snackbar);
    });
  }, 3000);
}