如何仅在有人打开选项卡(而不是页面加载)时运行动画

<div class="tab" id="tab1">选项卡1</div>
<div class="tab" id="tab2">选项卡2</div>
<div class="tab" id="tab3">选项卡3</div>

.tab {
  width: 100px;
  height: 50px;
  background-color: #ccc;
  cursor: pointer;
}

// 获取选项卡元素
var tab1 = document.getElementById("tab1");
var tab2 = document.getElementById("tab2");
var tab3 = document.getElementById("tab3");

// 添加事件监听器
tab1.addEventListener("click", runAnimation);
tab2.addEventListener("click", runAnimation);
tab3.addEventListener("click", runAnimation);

// 动画函数
function runAnimation() {
  // 检查选项卡是否已经打开
  if (!this.classList.contains("active")) {
    // 添加动画效果，这里使用了简单的淡入淡出效果
    this.classList.add("active");
    setTimeout(function() {
      this.classList.remove("active");
    }.bind(this), 1000);
  }
}