如何在颤动中显示连续两个对话框

// 获取对话框元素
var dialog1 = document.getElementById("dialog1");
var dialog2 = document.getElementById("dialog2");

// 设置初始状态
dialog1.style.display = "block";
dialog2.style.display = "none";

// 颤动效果
function shakeDialog() {
  // 添加颤动的CSS类
  dialog1.classList.add("shake");

  // 一段时间后显示第二个对话框
  setTimeout(function() {
    dialog2.style.display = "block";
    dialog2.classList.add("shake");

    // 一段时间后移除颤动效果
    setTimeout(function() {
      dialog1.classList.remove("shake");
      dialog2.classList.remove("shake");
    }, 1000);
  }, 1000);
}

// 调用颤动函数
shakeDialog();

.shake {
  animation: shake 0.5s linear;
}

@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-10px); }
  40% { transform: translateX(10px); }
  60% { transform: translateX(-10px); }
  80% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}